页面

rc-busness/pages/resentation/resentation.vue

@@ -0,0 +1,267 @@
+<template>
+  <div>
+    <Myheader></Myheader>
+    <div class="rc-top"></div>
+    <div class="ts-banner-swiper-container">
+      <img src="/images/userbanner.png" alt="" class="user-pc" />
+      <img src="/images/rc-phone.png" alt="" class="user-phone" />
+    </div>
+    <div class="all-contair">
+      <div class="all-contair dog-foot">
+        <h2>明星犬粮</h2>
+        <img src="/images/dogfoot.png" alt="" />
+        <strong>中型幼犬离乳期全家奶糕</strong>
+        <p>
+          中心犬离乳期专属<br />高易再水合颗粒<br />
+          帮助增强保护健康成长
+        </p>
+        <em
+          class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center"
+          @click="userselect(1)"
+        >
+          点击查看
+        </em>
+      </div>
+      <div class="all-contair cat-foot">
+        <h2>明星猫粮</h2>
+        <img src="/images/catfoot.png" alt="" />
+        <strong>皇家离乳期幼猫全家奶糕</strong>
+        <p>
+          幼猫成长专属<br />
+          支持幼猫自身保护力<br />
+          为快速生长提供足够能量
+        </p>
+        <em
+          class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center"
+          @click="userselect(2)"
+        >
+          点击查看
+        </em>
+      </div>
+    </div>
+    <div class="contair">
+      <nuxt-link :to="`/productdetails/productlist/`">
+        <span class="ts-standard-btn center">查看更多</span>
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import Myheader from "~/components/header.vue";
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    Myheader,
+  },
+  methods:{
+      userselect(item){
+          let productCode=88451
+         if(item==1){
+             
+                  this.$router.push({
+        path: "/productdetails/producted",
+        query: {
+          stype: 1,
+          isRxGoods: false,
+          productCode: '80240008F24',
+        },
+      });
+         }else{
+        this.$router.push({
+        path: "/productdetails/producted",
+        query: {
+          stype: 1,
+          isRxGoods: false,
+          productCode: '80240008F24',
+        },
+      });
+         }
+      }
+  }
+};
+</script>
+
+<style lang="less" scoped >
+@import url("../../assets/css/global.less");
+
+//手机端
+@media screen and (max-width: 768px) {
+  .user-pc {
+    display: none;
+  }
+  .user-phone {
+    display: block;
+    height: 400px;
+  }
+  .contair {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 50px;
+    margin-top: 100px;
+  }
+
+  .ts-banner-swiper-container {
+    img {
+      width: 100%;
+      height: 500px;
+    }
+  }
+  .all-contair {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 260px;
+      height: 185px;
+      display: block;
+    }
+    h2 {
+      color: #e2001a;
+      font-size: 20px;
+      font-weight: bold;
+    }
+    strong {
+      font-size: 16px;
+      color: #e2001a;
+      font-weight: bold;
+    }
+    p {
+      color: #666666;
+      font-size: 20px;
+      margin-top: 13px;
+    }
+    .dog-foot {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 48%;
+      img {
+        width: 260px;
+        height: 185px;
+        display: block;
+      }
+      p {
+        color: #666666;
+        font-size: 16px;
+        margin-top: 15px;
+        text-align: center;
+      }
+    }
+    .cat-foot {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 48%;
+      img {
+        width: 260px;
+        height: 185px;
+        display: block;
+      }
+      p {
+        color: #666666;
+        font-size: 16px;
+        margin-top: 15px;
+        text-align: center;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .user-phone {
+    display: none;
+  }
+  .contair {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 106px;
+    margin-top: 206px;
+    .ts-standard-btn {
+      width: 271px;
+      height: 83px;
+      background: #e2001a;
+      opacity: 1;
+      border-radius: 30px;
+      font-size: 29px;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .ts-banner-swiper-container {
+    img {
+      width: 100%;
+      height: 500px;
+    }
+  }
+  .all-contair {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 70px;
+    img {
+      width: 371px;
+      height: 525px;
+      display: block;
+    }
+    h2 {
+      color: #e2001a;
+      font-size: 83px;
+    }
+    strong {
+      font-size: 52px;
+      color: #e2001a;
+    }
+    p {
+      color: #666666;
+      font-size: 40px;
+      margin-top: 33px;
+    }
+    .dog-foot {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 48%;
+      img {
+        width: 371px;
+        height: 525px;
+        display: block;
+      }
+     
+    }
+    .cat-foot {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 48%;
+      img {
+        width: 371px;
+        height: 525px;
+        display: block;
+      }
+      p {
+        color: #666666;
+        font-size: 40px;
+        margin-top: 33px;
+        text-align: center;
+      }
+    }
+    .ts-standard-btn {
+      width: 270px;
+      height: 83px;
+      border: 2px solid #e2001a;
+      border-radius: 30px;
+      color: #e2001a;
+      font-size: 29px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>