live-telecast-ui-h5/src/views/paddy/index.vue

<template>
  <div class="paddy">
    <div class="bgImg">
      <img src="@/assets/images/home/bgImg.png" alt="" />
    </div>

    <div class="top">
      <!-- <img src="@/assets/images/home/paddy.png" alt="" /> -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="#DAAD71"
        @change="onChange"
      >
        <van-swipe-item style="width: 90vw">
          <img
            src="@/assets/images/home/swipper/swipper1.png"
            alt=""
            style="width: 100%"
          />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/images/home/swipper/swipper2.png" alt="" />
        </van-swipe-item>
        <template #indicator>
          <ul class="oUl">
            <li
              :class="
                current == 0
                  ? 'custom-indicator indicator-active'
                  : 'custom-indicator'
              "
            ></li>
            <li
              :class="
                current == 1
                  ? 'custom-indicator indicator-active'
                  : 'custom-indicator'
              "
            ></li>
          </ul>
        </template>
      </van-swipe>
    </div>
    <div class="centerBtn">
      <li @click="goto('/referMenu', '五常大米')">
        <img src="@/assets/images/home/centerUl/rice.png" alt="" />
        <p>五常大米</p>
      </li>
      <li @click="goto('/referMenu', '金卡权益')">
        <img src="@/assets/images/home/centerUl/card.png" alt="" />
        <p>金卡权益</p>
      </li>
      <li @click="goto('/referMenu', '品牌简介')">
        <img src="@/assets/images/home/centerUl/infro.png" alt="" />
        <p>品牌简介</p>
      </li>
    </div>
    <div class="detail">
      <p>产品展示</p>

      <li @click="goto('/referMenu', '五常大米-实惠装')">
        <div class="riceBag">
          <p class="riceBag-title">实惠装</p>
        </div>

        <img src="@/assets/images/home/detail/bag.png" alt="" />
      </li>
      <li @click="goto('/referMenu', '五常大米-礼盒装')">
        <div class="riceBox">
          <p class="riceBox-title">礼盒装</p>
        </div>
        <img src="@/assets/images/home/detail/box.png" alt="" />
      </li>
      <!-- <img src="@/assets/images/home/paddy-title.png" alt="" /> -->
      <!-- <img src="@/assets/images/home/paddy-detail.png" alt="" /> -->
    </div>
    <div class="middle">
      <p>产品优势</p>
      <!-- 每个元素的两侧间隔相等 -->
      <van-row type="flex" justify="center">
        <van-col
          span="12"
          style="padding: 2px 0px 0px 0"
          @click="goto('/live', '实时监控')"
        >
          <div class="card">
            <img
              src="@/assets/images/home/middle/cardOne.png"
              alt=""
              style="width: 40vw"
            />
            <p class="first">实时监控</p>
            <p class="second">全程溯源信赖保证</p>
            <div class="lastP">
              <p>查看更多</p>
            </div>
          </div>
          <div class="camera">
            <img src="@/assets/images/home/middle/camera.png" alt="" />
          </div>
        </van-col>
        <van-col span="12" style="padding: 0px 0 0px 0px">
          <van-col span="24" style="padding: 0 0 5px 0">
            <div class="cardTwo" @click="goto('/referMenu', '恒温保鲜')">
              <img
                src="@/assets/images/home/middle/cardTwo.png"
                alt=""
                style="width: 41vw"
              />
              <p class="first">恒温保鲜</p>
              <p class="second">带壳归仓恒温仓储</p>
              <div class="keepAlive">
                <img src="@/assets/images/home/middle/keepAlive.png" alt="" />
              </div>
            </div>

            <!-- <img src="@/assets/images/home/middle/keepAlive.png" alt="" /> -->
          </van-col>
          <van-col span="24" style="padding: 0 0 0px 0">
            <div class="cardThree" @click="goto('/referMenu', '现磨鲜米')">
              <img
                src="@/assets/images/home/middle/cardTwo.png"
                alt=""
                style="width: 41vw"
              />
              <p class="first">现磨鲜米</p>
              <p class="second">现磨现发随享鲜香</p>
              <div class="freshRice">
                <img src="@/assets/images/home/middle/freshRice.png" alt="" />
              </div>
            </div>
          </van-col>
        </van-col>
        <van-col span="12" style="padding: 8px 0px 0px 0">
          <div class="cardFour" @click="goto('/referMenu', '自然耕种')">
            <img
              src="@/assets/images/home/middle/cardTwo.png"
              alt=""
              style="width: 40vw"
            />
            <p class="first">自然耕种</p>
            <p class="second">农耕记忆山水乡愁</p>
            <div class="normalGrow">
              <img src="@/assets/images/home/middle/normalGrow.png" alt="" />
            </div>
          </div>
        </van-col>
        <van-col span="12" style="padding: 8px 0 0px 0px">
          <div class="cardFive" @click="goto('/referMenu', '生态有机')">
            <img
              src="@/assets/images/home/middle/cardTwo.png"
              alt=""
              style="width: 41vw"
            />
            <p class="first">生态有机</p>
            <p class="second">黄金纬度黑金厚土</p>
            <div class="organic">
              <img src="@/assets/images/home/middle/organic.png" alt="" />
            </div>
          </div>

          <!-- <img src="@/assets/images/home/middle/keepAlive.png" alt="" /> -->
        </van-col>
      </van-row>

      <!-- <van-row type="flex" justify="center" style="margin: 5px 0 0 0">
        <van-col span="12">
          <div class="cardFour" @click="goto('/referMenu', '自然耕种')">
            <img
              src="@/assets/images/home/middle/cardTwo.png"
              alt=""
              style="width: 40vw"
            />
            <p class="first">自然耕种</p>
            <p class="second">农耕记忆 山水乡愁</p>
          </div>
          <div class="normalGrow">
          </div>
        </van-col>
        <van-col span="12" style="padding: 0 0 0 5px">
          <div class="cardFive" @click="goto('/referMenu', '生态有机')">
            <img src="@/assets/images/home/middle/cardTwo.png" alt="" />
            <p class="first">生态有机</p>
            <p class="second">黄金纬度 黑金厚土</p>
          </div>
          <div class="organic">
          </div>
        </van-col>
      </van-row> -->
    </div>
    <div class="bottom">
      <img src="@/assets/img/footer.png" alt="" />
    </div>
    <!-- <div class="bottom">
      <img src="@/assets/img/footer.png" alt="" />
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    goto(url, name) {
      window.vm.$router.push({
        path: url,
        query: {
          type: name,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.paddy {
  overflow: scroll;
  position: relative;
  .bgImg {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    // height: 948px;
    img {
      width: 100%;
    }
  }
  .top {
    width: 90vw;
    margin: 34.5px auto 0 auto;
    img {
      width: 90vw;
    }
  }
  .bottom {
    width: 90vw;
    height: 108px;
    overflow: hidden;
    margin: 0 auto;
    z-index: 99999;
    position: relative;
    left: 0;
    // display: flex;
    // position: relative;
    bottom: 0;
    img {
      width: 90vw;
    }
  }
  .oUl {
    position: absolute;
    // top: 23vh;
    // left: 48vw;\
    padding: 0 0 0 0;
    margin: -2vh 0 0 44vw;
  }
  .custom-indicator {
    right: 155px;
    bottom: 7.5px;
    float: left;
    margin: 1px 3px;
    width: 6px;
    height: 6px;
    background: #7c6d5b;
    border-radius: 50%;
  }
  .indicator-active {
    background: #daad71;
    border-radius: 2px;
    width: 16px;
    height: 4px;
    margin-top: 2px;
  }
  .centerBtn {
    z-index: 99;
    width: 300px;
    height: 65px;
    position: relative;
    // top: 209px;
    margin: 2vh auto 0 auto;
    li {
      width: 60px;
      height: 100%;
      margin: 0 20px;
      float: left;
      list-style: none;
      text-align: center;
      img {
        width: 45px;
        height: 45px;
      }
      p {
        margin: 0 auto;
        width: 48px;
        height: 12px;

        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 200;
        color: #dab082;
        line-height: 13px;

        background: linear-gradient(
          -4deg,
          #b8925c 0%,
          #936e40 28.80859375%,
          #f6c684 65.8203125%,
          #936e40 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .detail {
    width: 90vw;
    height: 20vh;
    margin: 3vh auto 0;
    position: relative;
    // display: flex;
    // justify-content: center;
    p {
      width: 125px;
      height: 15.5px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #daad70;
      line-height: 15px;
      margin: 0px 0 10px 5px;
    }
    li {
      float: left;
      list-style: none;
      width: 42vw;
      height: 105px;
      margin: 0 0 0 9px;
      img {
        width: 100%;
      }
      .riceBag {
        width: 43px;
        height: 14px;
        background: #613c0c;
        border-radius: 10px 0;
        text-align: center;
        position: absolute;
        left: 8px;
        top: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        .riceBag-title {
          margin: 0;
          // width: 26.5px;
          transform: scale(0.8);
          width: 36.5px;
          height: 17.5px;
          font-size: 0.5rem;
          font-family: Source Han Sans CN;
          font-weight: 150;
          color: #f1cda9;
          line-height: 16.5px;
        }
      }
      .riceBox {
        width: 43px;
        height: 14px;
        background: #613c0c;
        border-radius: 10px 0;
        text-align: center;
        position: absolute;
        right: 120px;
        top: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        .riceBox-title {
          margin: 0;
          // width: 26.5px;
          transform: scale(0.8);
          width: 36.5px;
          height: 17.5px;
          font-size: 0.75rem;
          font-family: Source Han Sans CN;
          font-weight: 150;
          color: #f1cda9;
        }
      }
    }
  }
  .middle {
    width: 90vw;
    margin: 3vh auto 15px;
    position: relative;
    p {
      margin: 0 0 10px 5px;
      width: 126px;
      height: 15.5px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #daad70;
      line-height: 15px;
    }
    img {
      width: 100%;
    }
    .card {
      width: 45vw;
      // position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      .first {
        position: absolute;
        width: 78.5px;
        height: 14px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #613c0c;
        line-height: 3px;
        left: 3vw;
        top: 10vh;
      }
      .second {
        // margin: -21vh 0 0 5vw;
        position: absolute;
        top: 9vh;
        left: 4vw;
        // margin: 1vh 0 0 6vw;
        width: 48px;
        height: 24px;
        font-size: 11px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #613c0c;
        line-height: 12px;
      }
      .lastP {
        width: 52px;
        height: 17px;
        background: #0f0b06;
        border-radius: 13px;
        position: absolute;
        top: 15vh;
        left: 4vw;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          margin: 0;
          transform: scale(0.8);
          width: 48px;
          height: 12px;
          line-height: 12px;
          font-size: 0.5rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #c5a06b;
          line-height: 11.5px;
          background: linear-gradient(0deg, #a57d50 0%, #e3d097 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
    .camera {
      width: 20vw;
      position: absolute;
      left: 22vw;
      top: 6vh;
      // margin: 4vh 0 0 12vh;
    }
    .cardTwo {
      width: 40vw;
      display: flex;
      justify-content: center;
      // align-items: center;
      .first {
        position: absolute;
        left: 44vw;
        top: 16vh;
        margin: -9vh 0 0 5vw;
        width: 60px;
        height: 14.5px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #613c0c;
        line-height: 6px;
      }
      .second {
        position: absolute;
        left: 47vw;
        top: 9vh;
        margin: 0 0 0 5vw;
        width: 48px;
        height: 24px;
        font-size: 11px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #613c0c;
        line-height: 15px;
      }
      img {
        width: 100%;
      }
      .keepAlive {
        width: 14vw;
        position: absolute;
        left: 70vw;
        top: 5vh;
      }
    }

    .cardThree {
      width: 40vw;
      display: flex;
      justify-content: center;
      position: relative;
      .first {
        position: absolute;
        left: 3vw;
        top: 3vh;
        width: 60px;
        height: 14.5px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #613c0c;
        line-height: 6px;
      }
      .second {
        position: absolute;
        left: 3vw;
        top: 5vh;

        width: 48px;
        height: 24px;
        font-size: 11px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #613c0c;
        line-height: 15px;
      }
    }
    .freshRice {
      width: 14vw;
      position: absolute;
      top: 1vh;
      left: 24vw;
    }
    .cardFour {
      width: 45vw;
      position: relative;
      // position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      .first {
        position: absolute;
        width: 78.5px;
        height: 14px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #613c0c;
        line-height: 3px;
        left: 3vw;
        top: 10vh;
      }
      .second {
        // margin: -21vh 0 0 5vw;
        position: absolute;
        top: 9vh;
        left: 4vw;
        // margin: 1vh 0 0 6vw;
        width: 48px;
        height: 24px;
        font-size: 0.5rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #613c0c;
        line-height: 12px;
      }
      .normalGrow {
        width: 14vw;
        position: absolute;
        left: 26vw;
        top: 31vh;
        // margin: 4vh 0 0 12vh;
      }
    }
    .cardFive {
      width: 40vw;
      display: flex;
      position: relative;
      justify-content: center;
      .first {
        position: absolute;
        left: 2vw;
        top: 16px;
        width: 60px;
        height: 14.5px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #613c0c;
        line-height: 6px;
      }
      .second {
        position: absolute;
        left: 45vw;
        top: 33vh;
        margin: 0 0 0 5vw;
        width: 48px;
        height: 24px;
        font-size: 11px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #613c0c;
        line-height: 12px;
      }
      img {
        width: 100%;
      }
      .organic {
        width: 14vw;
        position: absolute;
        left: 70vw;
        top: 30vh;
      }
    }
  }

  @media screen and (max-width: 414px) {
    .middle .card {
      .first {
        // margin-top: 27px;
        font-size: 18px;
        left: 4vw;
        top: 7vh;
      }
      .second {
        font-size: 11px;
      }
      .lastP {
        left: 18px;
      }
    }

    .middle .cardTwo {
      .first {
        left: 44vw;
        top: 15vh;
      }
      .second {
        left: 44vw;
        top: 8vh;
      }
      .keepAlive {
        width: 11.5vw;
        left: 70vw;
        top: 5vh;
      }
    }

    //
    .middle .freshRice {
      top: 1vh;
      left: 24vw;
    }
    .middle .cardThree {
      .first {
        left: 3vw;
        top: 3vh;
      }
      .second {
        left: 3vw;
        top: 5vh;
      }
    }
    .middle .cardFour {
      .first {
        left: 4vw;
        top: 3vh;
      }
      .second {
        left: 4vw;
        top: 5vh;
      }
      .normalGrow {
        left: 24vw;
        top: 2vh;
      }
    }
    .middle .cardFive {
      .first {
        left: 2vw;
        top: 19px;
      }
      .second {
        left: -2vw;
        top: 34px;
      }
      .organic {
        left: 22vw;
        top: 13px;
      }
    }
    .detail li .riceBox {
      right: 137px;
    }
  }
  @media screen and (max-width: 375px) {
    .middle .card {
      .first {
        // margin-top: 27px;
        font-size: 16px;
        left: 4vw;
        top: 9vh;
      }
      .second {
        top: 12vh;
        left: 4vw;
      }
      .lastP {
        top: 17vh;
        left: 5vw;
        span {
          font-size: 0.6rem;
        }
      }
    }

    .middle .cardTwo {
      .first {
        left: 44vw;
        top: 16vh;
      }
      .second {
        left: 44vw;
        top: 9vh;
      }
      .keepAlive {
        width: 12vw;
        left: 70vw;
        top: 5vh;
      }
    }
    //
    .middle .freshRice {
      top: 1vh;
      left: 24vw;
    }
    .middle .cardThree {
      .first {
        left: 3vw;
        top: 3vh;
      }
      .second {
        left: 3vw;
        top: 5vh;
      }
    }
    .middle .cardFour {
      .first {
        left: 4vw;
        top: 3vh;
      }
      .second {
        left: 4vw;
        top: 5vh;
      }
      .normalGrow {
        left: 24vw;
        top: 2vh;
      }
    }
    .middle .cardFive {
      .first {
        left: 2vw;
        top: 19px;
      }
      .second {
        left: -2vw;
        top: 34px;
      }
      .organic {
        left: 22vw;
        top: 13px;
      }
    }
    .detail li .riceBox {
      right: 120px;
    }
  }
  @media screen and (max-width: 360px) {
    .detail li .riceBox {
      right: 113px;
    }
    .middle .card {
      .first {
        // margin-top: 27px;
        font-size: 15px;
        left: 14px;
        top: 47px;
      }
      .second {
        left: 14px;
        top: 62px;
      }
      .lastP {
        top: 17vh;
        left: 5vw;
        span {
          font-size: 0.6rem;
        }
      }
    }
    .middle .cardTwo {
      .first {
        left: 157px;
        top: 99px;
      }
      .second {
        left: 157px;
        top: 55px;
      }
      .keepAlive {
        width: 13vw;
        left: 243px;
        top: 32px;
      }
    }
    .middle .cardThree {
      .first {
        left: 3vw;
        top: 3vh;
      }
      .second {
        left: 3vw;
        top: 5vh;
      }
    }
    .middle .freshRice {
      top: 1vh;
      left: 23vw;
    }
    .middle .cardFour {
      .first {
        left: 4vw;
        top: 3vh;
      }
      .second {
        left: 4vw;
        top: 5vh;
      }
      .normalGrow {
        left: 24vw;
        top: 2vh;
      }
    }
    .middle .cardFive {
      .first {
        left: 2vw;
        top: 16px;
      }
      .second {
        left: -2vw;
        top: 30px;
      }
      .organic {
        left: 22vw;
        top: 13px;
      }
    }
  }
  @media screen and (max-width: 320px) {
    .productPack .box {
      p {
        margin: 7.5px 0 7px 4px;
      }
      span {
        margin: 12.5px 0 0px 8px;
      }
    }
    .middle .card {
      .first {
        font-size: 0.9rem;
        left: 12px;
        top: 9vh;
      }
      .second {
        top: 64px;
        left: 7px;
        font-size: 0.7rem;
        transform: scale(0.8);
      }
      .lastP {
        top: 18vh;
        left: 4vw;
        span {
          font-size: 0.6rem;
        }
      }
    }

    .middle .camera {
      left: 22vw;
      top: 8vh;
    }

    .middle .cardTwo {
      .first {
        left: 138px;
        top: 90px;
        font-size: 14px;
      }
      .second {
        transform: scale(0.8);

        left: 134px;
        top: 51px;
        font-size: 0.7rem;
      }
      .keepAlive {
        width: 13vw;
        left: 223px;
        top: 32px;
      }
    }

    .middle .keepAlive {
      width: 11.5vw;
      left: 70vw;
      top: 6vh;
    }
    .middle .cardFour {
      .first {
        left: 4vw;
        top: 3vh;
      }
      .second {
        transform: scale(0.8);
        left: 3vw;
        top: 5vh;
      }
      .normalGrow {
        left: 26vw;
        top: 2vh;
      }
    }

    //
    .middle .freshRice {
      top: 1vh;
      left: 24vw;
    }
    .middle .cardThree {
      .first {
        font-size: 14px;
        left: 3vw;
        top: 3vh;
      }
      .second {
        left: 2vw;
        top: 5vh;
        transform: scale(0.8);
      }
    }

    .middle .cardFive {
      .first {
        left: 2vw;
        top: 17px;
      }
      .second {
        transform: scale(0.8);

        left: -3vw;
        top: 30px;
      }
      .organic {
        left: 25vw;
        top: 13px;
      }
    }

    .detail li .riceBox {
      right: 94px;
    }
  }

  @media screen and (min-height: 812px) {
    .middle .card .first {
      // margin-top: 27px;
      font-size: 16px;

      left: 4vw;
      top: 7vh;
    }
    .middle .card .second {
      top: 9vh;
      left: 4vw;
    }
    .middle .camera {
      left: 22vw;
      top: 6vh;
    }
    .middle .card .lastP {
      top: 13vh;
      left: 5vw;
      span {
        font-size: 12px;
      }
    }
    .middle .cardTwo .first {
      left: 44vw;
      top: 14vh;
    }
    .middle .cardTwo .keepAlive {
      width: 11.5vw;
      left: 70vw;
      top: 4vh;
    }
    .middle .cardTwo .second {
      left: 44vw;
      top: 7vh;
    }
    //
    .middle .freshRice {
      top: 2vh;
      left: 25vw;
    }
    .middle .cardThree .first {
      left: 3vw;
      top: 2vh;
    }
    .middle .cardThree .second {
      left: 3vw;
      top: 4vh;
    }
    .middle .cardFour {
      .first {
        left: 4vw;
        top: 3vh;
      }
      .second {
        left: 4vw;
        top: 5vh;
      }
      .normalGrow {
        left: 24vw;
        top: 2vh;
      }
    }

    .middle .cardFive {
      .first {
        left: 2vw;
        top: 19px;
      }
      .second {
        left: -2vw;
        top: 34px;
      }
      .organic {
        left: 24vw;
        top: 21px;
      }
    }
  }
}
</style>