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

<template>
  <div class="paddy">
    <div class="top">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="#DAAD71"
        @change="onChange"
      >
        <van-swipe-item>
          <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=""
            style="width: 100%"
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="@/assets/images/home/swipper/swipper3.png"
            alt=""
            style="width: 100%"
          />
        </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>
            <li
              :class="
                current == 2
                  ? 'custom-indicator indicator-active'
                  : 'custom-indicator'
              "
            ></li>
          </ul>
        </template>
      </van-swipe>
    </div>
    <div class="centerBtn">
      <li
        v-for="(item, index) in centerBtnList"
        :key="item.name + index"
        @click="goto('/introduce', index + 1)"
      >
        <img :src="item.img" alt="" />
        <p>{{ item.name }}</p>
      </li>
    </div>
    <div class="detail">
      <p>产品展示</p>
      <ul class="baozhuangBox clear">
        <li
          v-for="(item, index) in baozhuangBoxList"
          :key="index + item.name"
          @click="goto('/goods', index)"
        >
          <div class="riceBag">
            <img :src="item.img" alt="" />
            <div class="fd">{{ item.name }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="middle">
      <p class="middle-title">产品优势</p>
      <div class="middle-div clear">
        <ul>
          <li
            v-for="(item, index) in list1"
            :key="item.title + index"
            @click="goto(index === 0 ? '/live' : '/introduce', index + 3)"
            :class="{ left: index === 0 || index === 3, he: index === 0 }"
          >
            <div class="first">
              <div class="title">{{ item.title }}</div>
              <div class="desc" v-for="test in item.desc" :key="test + index">
                {{ test }}
              </div>
              <div class="lastP" v-if="index === 0">
                <img :src="more" alt="" />
              </div>
            </div>
            <div class="second">
              <img :src="item.img" alt="" />
            </div>
          </li>
        </ul>
        <ul>
          <li
            v-for="(item, index) in list2"
            :key="item.title + index"
            @click="goto('/introduce', index + 6)"
            :class="{ left: index === 0, right: index !== 0 }"
          >
            <div class="first">
              <div class="title">{{ item.title }}</div>
              <div class="desc" v-for="test in item.desc" :key="test + index">
                {{ test }}
              </div>
            </div>
            <div class="second">
              <img :src="item.img" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <img :src="footer" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 0,
      footer: require("@/assets/images/footer.png"), //用户头像
      centerBtnList: [
        {
          name: "五常大米",
          img: require("@/assets/images/home/centerUl/rice.png"),
        },
        {
          name: "金卡权益",
          img: require("@/assets/images/home/centerUl/card.png"),
        },
        {
          name: "品牌简介",
          img: require("@/assets/images/home/centerUl/infro.png"),
        },
      ],
      baozhuangBoxList: [
        {
          name: "实惠装",
          img: require("@/assets/images/home/detail/bag.png"),
        },
        {
          name: "礼盒装",
          img: require("@/assets/images/home/detail/box.png"),
        },
      ],
      more: require("@/assets/images/home/more.png"),
      list1: [
        {
          title: "实时监控",
          desc: ["全程溯源", "信赖保证"],
          img: require("@/assets/images/home/middle/camera.png"),
        },
        {
          title: "恒温保鲜",
          desc: ["带壳归仓", "恒温仓储"],
          img: require("@/assets/images/home/middle/keepAlive.png"),
        },
        {
          title: "现磨鲜米",
          desc: ["现磨现发", "随享鲜香"],
          img: require("@/assets/images/home/middle/freshRice.png"),
        },
      ],
      list2: [
        {
          title: "自然耕种",
          desc: ["农耕记忆", "山水乡愁"],
          img: require("@/assets/images/home/middle/normalGrow.png"),
        },
        {
          title: "生态有机",
          desc: ["黄金纬度", "黑金厚土"],
          img: require("@/assets/images/home/middle/organic.png"),
        },
      ],
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    goto(url, index) {
      window.vm.$router.push({
        path: url,
        query: {
          index: index,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.paddy {
  overflow: scroll;
  background: #000;
  background: url("../../assets/images/home/bgImg.png") no-repeat center !important;
  background-size: 100% 100% !important;
  padding: 0 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  .top {
    width: 100%;
    margin: 10px auto 0;
    img {
      display: inline-block;
      width: 100%;
    }
  }
  .bottom {
    width: 100%;
    margin: 20px auto 50px;

    img {
      width: 100%;
    }
  }
  .oUl {
    position: absolute;
    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 {
    width: calc(100% + 32px);
    display: flex;
    justify-content: center;
    margin: 25px auto 18px -16px;
    li {
      height: 100%;
      margin: 0 auto;
      list-style: none;
      text-align: center;
      img {
        width: calc(100% - 60px);
      }
      p {
        margin: 5px 0 15px 0;
        font-weight: 200;
        color: #dab082;
        font-size: 17px;
        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: 100%;
    box-sizing: border-box;
    padding: 0 0 0 0;
    p {
      font-size: 1.4em;
      font-weight: 500;
      color: #daad70;
      line-height: 15px;
    }
    .baozhuangBox {
      width: 100%;
      li {
        width: calc(50% - 6px);
        &:first-child {
          float: left;
        }
        &:last-child {
          float: right;
        }
        .riceBag {
          position: relative;
          width: 100%;
          img {
            width: 100%;
            position: relative;
          }
          .fd {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9;
            border-bottom-right-radius: 10px;
            font-weight: 150;
            font-size: 12px;
            height: 26px;
            text-align: center;
            line-height: 26px;
            width: 55px;
            color: #f1cda9;
            background: #613c0c;
          }
        }
      }
    }
  }
  .middle {
    width: 100%;
    margin: auto;
    p.middle-title {
      font-size: 1.4em;
      font-weight: 500;
      color: #daad70;
    }
    .middle-div {
      width: 100%;
      ul {
        width: 100%;
        float: left;
        li {
          width: calc(50% - 6px);
          float: right;
          box-sizing: border-box;
          border-radius: 8px;
          overflow: hidden;
          background: linear-gradient(
            0deg,
            #a2794d,
            #ba9363,
            #cba66f,
            #d7b27a,
            #e3c48a,
            #e3d097
          );
          &.left {
            float: left;
          }

          .first {
            float: left;
            width: 48%;
            height: 100%;
            .title {
              color: #613c0c;
              font-weight: bolder;
            }
            .desc {
              color: #613c0c;
            }
            .lastP {
              background: #0f0b06;
              text-align: center;
              overflow: hidden;
              border-radius: 10px;
              padding: 2px 0 0 3px;
              margin: 15px 0 0 0;
              width: 46px;
              height: 13px;
              img {
                display: inline-block;
                width: 100%;
                height: 100%;
              }
            }
          }
          .second {
            width: 52%;
            float: left;
            img {
              display: inline-block;
              width: 100%;
            }
          }
        }
      }
    }

    @media screen and (min-width: 0px) {
      .middle-div {
        ul {
          li {
            height: 90px;
            margin: 0 0 10px 0;
            padding: 9px 15px;
            &.he {
              height: 190px;
            }
            .first {
              padding: 4px 0 0 0;
              .title {
                font-size: 12px;
                line-height: 28px;
                height: 28px;
                margin: 0 0 1px 0;
              }
              .desc {
                font-size: 12px;
                line-height: 16px;
              }
            }
            &.he {
              .first {
                padding: 42px 0 0 0;
              }
              .second img {
                width: 120%;
                margin: 35px 0 0 0;
              }
            }
            &:nth-child(4) {
              .second img {
                margin: 14px 0 0 7px;
              }
            }
            &:nth-child(5) {
              .second img {
                margin: 12px 0 0 7px;
              }
            }
          }
        }
      }
    }
    @media screen and (min-width: 359px) {
      .middle-div {
        ul {
          li {
            height: 105px;
            margin: 0 0 10px 0;
            padding: 9px 15px;
            &.he {
              height: 220px;
            }
            .first {
              padding: 7px 0 0 0;
              .title {
                font-size: 14px;
                line-height: 30px;
                height: 30px;
                margin: 0 0 5px 0;
              }
              .desc {
                font-size: 13px;
                line-height: 18px;
              }
            }
            &.he {
              .first {
                padding: 42px 0 0 0;
              }
              .second img {
                width: 120%;
                margin: 35px 0 0 0;
              }
            }
            &:nth-child(4) {
              .second img {
                margin: 14px 0 0 7px;
              }
            }
            &:nth-child(5) {
              .second img {
                margin: 12px 0 0 7px;
              }
            }
          }
        }
      }
    }
    @media screen and (min-width: 374px) {
      .middle-div {
        ul {
          li {
            height: 108px;
            margin: 0 0 10px 0;
            padding: 9px 15px;
            &.he {
              height: 226px;
            }
            .first {
              padding: 8px 0 0 0;
              .title {
                font-size: 16px;
                line-height: 30px;
                height: 30px;
                margin: 0 0 5px 0;
              }
              .desc {
                font-size: 14px;
                line-height: 18px;
              }
            }
            &.he {
              .first {
                padding: 50px 0 0 0;
              }
              .second img {
                width: 120%;
                margin: 40px 0 0 0;
              }
            }
            &:nth-child(4) {
              .second img {
                margin: 14px 0 0 7px;
              }
            }
            &:nth-child(5) {
              .second img {
                margin: 12px 0 0 7px;
              }
            }
          }
        }
      }
    }
    @media screen and (min-width: 413px) {
      .middle-div {
        ul {
          li {
            height: 120px;
            margin: 0 0 10px 0;
            padding: 9px 15px;
            &.he {
              height: 250px;
            }
            .first {
              padding: 15px 0 0 0;
              .title {
                font-size: 18px;
                line-height: 30px;
                height: 30px;
                margin: 0 0 5px 0;
              }
              .desc {
                font-size: 16px;
                line-height: 18px;
              }
            }
            &.he {
              .first {
                padding: 70px 0 0 0;
              }
              .second img {
                width: 120%;
                margin: 50px 0 0 0;
              }
            }
            &:nth-child(4) {
              .second img {
                margin: 14px 0 0 7px;
              }
            }
            &:nth-child(5) {
              .second img {
                margin: 12px 0 0 7px;
              }
            }
          }
        }
      }
    }
  }
}
</style>