Accueil Explorer Aide
S'inscrire Connexion
miaxis
/
sqxp-front
5
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

保存资源

wyling il y a 4 ans
Parent
f765c8cc79
commit
0b01c9660f
52 fichiers modifiés avec 456 ajouts et 480 suppressions
Vue séparée Afficher les stats Diff
  1. 3 6
      public/index.html
  2. 57 18
      src/App.vue
  3. BIN
      src/assets/img/logo.jpg
  4. BIN
      src/assets/img/logo_font.png
  5. BIN
      src/assets/img/logo_info.png
  6. BIN
      src/assets/img/u105.png
  7. 8 0
      src/assets/img/u106.svg
  8. 8 0
      src/assets/img/u107.svg
  9. 8 0
      src/assets/img/u108.svg
  10. 8 0
      src/assets/img/u109.svg
  11. 8 0
      src/assets/img/u110.svg
  12. 8 0
      src/assets/img/u111.svg
  13. 8 0
      src/assets/img/u112.svg
  14. 8 0
      src/assets/img/u113.svg
  15. 18 0
      src/assets/img/u115.svg
  16. BIN
      src/assets/img/u21.png
  17. BIN
      src/assets/img/u22.png
  18. 6 0
      src/assets/img/u27.svg
  19. 8 0
      src/assets/img/u31.svg
  20. 8 0
      src/assets/img/u33.svg
  21. 8 0
      src/assets/img/u34.svg
  22. 8 0
      src/assets/img/u35.svg
  23. 8 0
      src/assets/img/u36.svg
  24. 6 0
      src/assets/img/u40.svg
  25. 6 0
      src/assets/img/u44.svg
  26. BIN
      src/assets/img/u49.png
  27. 6 0
      src/assets/img/u50.svg
  28. BIN
      src/assets/img/u54.png
  29. BIN
      src/assets/img/u55.png
  30. BIN
      src/assets/img/u56.png
  31. BIN
      src/assets/img/u57.png
  32. BIN
      src/assets/img/u58.png
  33. 7 0
      src/assets/img/u6.svg
  34. 7 0
      src/assets/img/u63.svg
  35. 8 0
      src/assets/img/u64.svg
  36. 6 0
      src/assets/img/u7.svg
  37. BIN
      src/assets/img/u70.png
  38. BIN
      src/assets/img/u71.png
  39. 8 0
      src/assets/img/u73.svg
  40. 8 0
      src/assets/img/u74.svg
  41. 8 0
      src/assets/img/u75.svg
  42. BIN
      src/assets/logo.png
  43. BIN
      src/assets/logo1.jpg
  44. BIN
      src/assets/logo2.jpg
  45. 18 0
      src/assets/style/mixin.scss
  46. 0 147
      src/components/homePage.vue
  47. 0 213
      src/components/productList.vue
  48. 6 6
      src/main.js
  49. 20 18
      src/router/index.js
  50. 0 72
      src/views/Home.vue
  51. 88 0
      src/views/home/index.vue
  52. 66 0
      src/views/shopping/index.vue

+ 3 - 6
public/index.html
Voir le fichier 

@@ -3,15 +3,12 @@
 
   <head>
 
     <meta charset="utf-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
+    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=0">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-    <title><%= htmlWebpackPlugin.options.title %></title>
 
+    <title>山泉心品官网</title>
 
   </head>
 
   <body>
 
-    <noscript>
 
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
-    </noscript>
 
     <div id="app"></div>
 
-    <!-- built files will be auto injected -->
 
   </body>
 
 </html>

+ 57 - 18
src/App.vue
Voir le fichier 

@@ -1,28 +1,67 @@
 
 <template>
 
   <div id="app">
 
-    <router-view/>
 
+    <transition :name="transitionName">
 
+      <router-view class="view"></router-view>
 
+    </transition>
 
   </div>
 
 </template>
 
 
-<style>
 
-#app {
 
-  font-family: Avenir, Helvetica, Arial, sans-serif;
 
-  -webkit-font-smoothing: antialiased;
 
-  -moz-osx-font-smoothing: grayscale;
 
-  text-align: center;
 
-  color: #2c3e50;
 
-}
 
+<script>
 
+export default {
 
+  name: "App",
 
+  data() {
 
+    return {
 
+      transitionName: ""
 
+    };
 
+  },
 
+  watch: {
 
+    //使用watch 监听$router的变化
 
+    $route(to, from) {
 
+      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
 
+      if (to.meta.index > from.meta.index) {
 
+        //设置动画名称
 
+        this.transitionName = "slide-left";
 
+      } else {
 
+        this.transitionName = "slide-right";
 
+      }
 
+    }
 
+  }
 
+};
 
+</script>
 
 
-#nav {
 
-  padding: 30px;
 
+<style scoped="scoped" lang="scss">
 
+* {
 
+  margin: 0;
 
+  padding: 0;
 
 }
 
-
 
-#nav a {
 
-  font-weight: bold;
 
-  color: #2c3e50;
 
+.view {
 
+  width: 100%;
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
 }
 
-
 
-#nav a.router-link-exact-active {
 
-  color: #42b983;
 
+.slide-right-enter-active,
 
+.slide-right-leave-active,
 
+.slide-left-enter-active,
 
+.slide-left-leave-active {
 
+  will-change: transform;
 
+  transition: all 250ms;
 
+  position: absolute;
 
+}
 
+.slide-right-enter {
 
+  opacity: 0;
 
+  transform: translate3d(-100%, 0, 0);
 
+}
 
+.slide-right-leave-active {
 
+  opacity: 0;
 
+  transform: translate3d(100%, 0, 0);
 
+}
 
+.slide-left-enter {
 
+  opacity: 0;
 
+  transform: translate3d(100%, 0, 0);
 
+}
 
+.slide-left-leave-active {
 
+  opacity: 0;
 
+  transform: translate3d(-100%, 0, 0);
 
 }
 
 </style>

BIN
src/assets/img/logo.jpg
Voir le fichier


BIN
src/assets/img/logo_font.png
Voir le fichier


BIN
src/assets/img/logo_info.png
Voir le fichier


BIN
src/assets/img/u105.png
Voir le fichier


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u106.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u107.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u108.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u109.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u110.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u111.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u112.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u113.svg


+ 18 - 0
src/assets/img/u115.svg
Voir le fichier 

@@ -0,0 +1,18 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="68px" height="68px" xmlns="http://www.w3.org/2000/svg">
 
+  <defs>
 
+    <filter x="331px" y="731px" width="68px" height="68px" filterUnits="userSpaceOnUse" id="filter111">
 
+      <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
 
+      <feGaussianBlur stdDeviation="4.5" in="shadowOffsetInner" result="shadowGaussian" />
 
+      <feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
 
+      <feColorMatrix type="matrix" values="0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 1 0  " in="shadowComposite" />
 
+    </filter>
 
+    <g id="widget112">
 
+      <path d="M 365 740  C 379 740  390 751  390 765  C 390 779  379 790  365 790  C 351 790  340 779  340 765  C 340 751  351 740  365 740  Z " fill-rule="nonzero" fill="#59ceb7" stroke="none" />
 
+    </g>
 
+  </defs>
 
+  <g transform="matrix(1 0 0 1 -331 -731 )">
 
+    <use xlink:href="#widget112" filter="url(#filter111)" />
 
+    <use xlink:href="#widget112" />
 
+  </g>
 
+</svg>

BIN
src/assets/img/u21.png
Voir le fichier


BIN
src/assets/img/u22.png
Voir le fichier


+ 6 - 0
src/assets/img/u27.svg
Voir le fichier 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; display: block; shape-rendering: auto;" width="80px" height="80px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
 
+<circle cx="50" cy="50" fill="none" stroke="#409eff" stroke-width="4" r="30" stroke-dasharray="141.37166941154067 49.12388980384689">
 
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
 
+</circle>
 
+<!-- [ldio] generated by https://loading.io/ --></svg>

Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u31.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u33.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u34.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u35.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u36.svg


+ 6 - 0
src/assets/img/u40.svg
Voir le fichier 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" xmlns="http://www.w3.org/2000/svg">
 
+  <g transform="matrix(1 0 0 1 -192 -66 )">
 
+    <path d="M 217 66  C 231 66  242 77  242 91  C 242 105  231 116  217 116  C 203 116  192 105  192 91  C 192 77  203 66  217 66  Z " fill-rule="nonzero" fill="#d7d7d7" stroke="none" />
 
+  </g>
 
+</svg>

+ 6 - 0
src/assets/img/u44.svg
Voir le fichier 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="86px" height="2px" xmlns="http://www.w3.org/2000/svg">
 
+  <g transform="matrix(1 0 0 1 -125 -267 )">
 
+    <path d="M 125 267.5  L 210 267.5  " stroke-width="1" stroke-dasharray="9,4,2,4" stroke="#ffffff" fill="none" />
 
+  </g>
 
+</svg>

BIN
src/assets/img/u49.png
Voir le fichier


+ 6 - 0
src/assets/img/u50.svg
Voir le fichier 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="4px" height="2px" xmlns="http://www.w3.org/2000/svg">
 
+  <g transform="matrix(1 0 0 1 -97 -249 )">
 
+    <path d="M 97 249.5  L 100 249.5  " stroke-width="1" stroke="#f2f2f2" fill="none" />
 
+  </g>
 
+</svg>

BIN
src/assets/img/u54.png
Voir le fichier


BIN
src/assets/img/u55.png
Voir le fichier


BIN
src/assets/img/u56.png
Voir le fichier


BIN
src/assets/img/u57.png
Voir le fichier


BIN
src/assets/img/u58.png
Voir le fichier


+ 7 - 0
src/assets/img/u6.svg
Voir le fichier 

@@ -0,0 +1,7 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="80px" height="80px" xmlns="http://www.w3.org/2000/svg">
 
+  <g transform="matrix(1 0 0 1 -88 -228 )">
 
+    <path d="M 128 228  C 150.4 228  168 245.6  168 268  C 168 290.4  150.4 308  128 308  C 105.6 308  88 290.4  88 268  C 88 245.6  105.6 228  128 228  Z " fill-rule="nonzero" fill="#f2f2f2" stroke="none" />
 
+    <path d="M 128 228.5  C 150.12 228.5  167.5 245.88  167.5 268  C 167.5 290.12  150.12 307.5  128 307.5  C 105.88 307.5  88.5 290.12  88.5 268  C 88.5 245.88  105.88 228.5  128 228.5  Z " stroke-width="1" stroke="#797979" fill="none" />
 
+  </g>
 
+</svg>

+ 7 - 0
src/assets/img/u63.svg
Voir le fichier 

@@ -0,0 +1,7 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="290px" height="290px" xmlns="http://www.w3.org/2000/svg">
 
+  <g transform="matrix(1 0 0 1 -43 -833 )">
 
+    <path d="M 188 839  C 265.84 839  327 900.16  327 978  C 327 1055.84  265.84 1117  188 1117  C 110.16 1117  49 1055.84  49 978  C 49 900.16  110.16 839  188 839  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" />
 
+    <path d="M 188 836.5  C 267.24 836.5  329.5 898.76  329.5 978  C 329.5 1057.24  267.24 1119.5  188 1119.5  C 108.76 1119.5  46.5 1057.24  46.5 978  C 46.5 898.76  108.76 836.5  188 836.5  Z " stroke-width="7" stroke="#f2f2f2" fill="none" />
 
+  </g>
 
+</svg>

Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u64.svg


+ 6 - 0
src/assets/img/u7.svg
Voir le fichier 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="67px" height="67px" xmlns="http://www.w3.org/2000/svg">
 
+  <g transform="matrix(1 0 0 1 -95 -235 )">
 
+    <path d="M 128.5 235  C 147.26 235  162 249.74  162 268.5  C 162 287.26  147.26 302  128.5 302  C 109.74 302  95 287.26  95 268.5  C 95 249.74  109.74 235  128.5 235  Z " fill-rule="nonzero" fill="#d7d7d7" stroke="none" />
 
+  </g>
 
+</svg>

BIN
src/assets/img/u70.png
Voir le fichier


BIN
src/assets/img/u71.png
Voir le fichier


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u73.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u74.svg


Fichier diff supprimé car celui-ci est trop grand
+ 8 - 0
src/assets/img/u75.svg


BIN
src/assets/logo.png
Voir le fichier


BIN
src/assets/logo1.jpg
Voir le fichier


BIN
src/assets/logo2.jpg
Voir le fichier


+ 18 - 0
src/assets/style/mixin.scss
Voir le fichier 

@@ -0,0 +1,18 @@
 
+.goshopping{
 
+    width: 12vw;
 
+    height: 12vw;
 
+    font-size: 4vw;
 
+    border-radius: 50%;
 
+    position: fixed;
 
+    bottom: 15vw;
 
+    right: 5vw;
 
+    border: 1vw solid #1ABC9C;
 
+    background-color: #1ABC9C;
 
+    opacity: 0.8;
 
+    box-shadow: 0px 5px 5px gray;
 
+    color: #fff;
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: center;
 
+    align-items: center;
 
+  }

+ 0 - 147
src/components/homePage.vue
Voir le fichier 

@@ -1,147 +0,0 @@
 
-<template>
 
-  <div class="home">
 
-    <van-swipe :autoplay="2000" class="top">
 
-      <van-swipe-item v-for="(image, index) in images" :key="index">
 
-        <img v-lazy="image" />
 
-      </van-swipe-item>
 
-    </van-swipe>
 
-
 
-    <div class="advantage">
 
-      <div class="columnTitle">
 
-        <div class="tit">本草银耳特点</div>
 
-        <div class="en">BRAND ADVANTAGE</div>
 
-      </div>
 
-      <div class="wrap">
 
-        <a
 
-          href="javascript:void(0);"
 
-          class="picturebox"
 
-          v-for="(item, index) in picture"
 
-          :key="index"
 
-        >
 
-          <div class="picture">
 
-            <img class="icon" :src="item.icon" />
 
-            <img class="pic" :src="item.pic" />
 
-          </div>
 
-          <div class="p1">{{ item.p1 }}</div>
 
-          <div class="p2">{{ item.p2 }}</div>
 
-        </a>
 
-      </div>
 
-    </div>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-import Vue from "vue";
 
-import { Lazyload } from "vant";
 
-
 
-Vue.use(Lazyload);
 
-export default {
 
-  name: "Home",
 
-  data() {
 
-    return {
 
-      activeName: "a",
 
-      images: [
 
-        "https://www.ijinyaner.com/uploadfile/2021/0114/20210114105511763.jpg",
 
-        "https://www.ijinyaner.com/uploadfile/2020/1030/20201030034302916.jpg",
 
-        "https://www.ijinyaner.com/uploadfile/2020/0820/20200820021337550.jpg",
 
-        "https://www.ijinyaner.com/uploadfile/2019/1213/20191213051007736.jpg"
 
-      ],
 
-      picture: [
 
-        {
 
-          icon:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041602536.png",
 
-          pic:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041557428.jpg",
 
-          p1: "十余种滋补中草药培植 胶质营养是燕窝的3倍",
 
-          p2:
 
-            "Cultivated by a dozen nourishing Chinese herbal medicines, its colloid nutrition is three times that of bird’s nest"
 
-        },
 
-        {
 
-          icon:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041602536.png",
 
-          pic:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041557428.jpg",
 
-          p1: "十余种滋补中草药培植 胶质营养是燕窝的3倍",
 
-          p2:
 
-            "Cultivated by a dozen nourishing Chinese herbal medicines, its colloid nutrition is three times that of bird’s nest"
 
-        },
 
-        {
 
-          icon:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041602536.png",
 
-          pic:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041557428.jpg",
 
-          p1: "十余种滋补中草药培植 胶质营养是燕窝的3倍",
 
-          p2:
 
-            "Cultivated by a dozen nourishing Chinese herbal medicines, its colloid nutrition is three times that of bird’s nest"
 
-        },
 
-        {
 
-          icon:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041602536.png",
 
-          pic:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041557428.jpg",
 
-          p1: "十余种滋补中草药培植 胶质营养是燕窝的3倍",
 
-          p2:
 
-            "Cultivated by a dozen nourishing Chinese herbal medicines, its colloid nutrition is three times that of bird’s nest"
 
-        }
 
-      ]
 
-    };
 
-  }
 
-};
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-$width: 1400px;
 
-.home{
 
-  display: flex;
 
-  flex-direction: column;
 
-  align-items: center;
 
-}
 
-
 
-.top {
 
-  width: 100vw;
 
-  max-width: $width;
 
-  max-height: calc(#{$width} * 0.5625);
 
-  height: 56.25vw;
 
-  background-color: #ccc;
 
-  img {
 
-    width: 100%;
 
-    height: 100%;
 
-  }
 
-}
 
-
 
-.advantage {
 
-  margin: 2vw 0;
 
-  .columnTitle {
 
-    .tit {
 
-      font-size: 7vw;
 
-    }
 
-  }
 
-  .wrap {
 
-    display: flex;
 
-    justify-content: center;
 
-    flex-wrap: wrap;
 
-    .picturebox {
 
-      width: 43vw;
 
-      margin: 2vw 1vw;
 
-      color: #000;
 
-      .picture {
 
-        width: 100%;
 
-        position: relative;
 
-        .icon {
 
-          position: absolute;
 
-          top: 50%;
 
-          left: 50%;
 
-          transform: translate(-50%, -50%);
 
-        }
 
-        .pic {
 
-          width: 50%;
 
-          border-radius: 50%;
 
-        }
 
-      }
 
-      .p1 {
 
-        margin: 2vw 0;
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>

+ 0 - 213
src/components/productList.vue
Voir le fichier 

@@ -1,213 +0,0 @@
 
-<template>
 
-  <div class="home">
 
-    <van-swipe :autoplay="2000" class="top">
 
-      <van-swipe-item v-for="(image, index) in images" :key="index">
 
-        <img v-lazy="image" />
 
-      </van-swipe-item>
 
-    </van-swipe>
 
-
 
-    <div class="advantage">
 
-      <div class="columnTitle">
 
-        <div class="tit">本草银耳特点</div>
 
-        <div class="en">BRAND ADVANTAGE</div>
 
-      </div>
 
-      <div class="wrap">
 
-        <a
 
-          href="javascript:void(0);"
 
-          class="picturebox"
 
-          v-for="(item, index) in picture"
 
-          :key="index"
 
-        >
 
-          <div class="picture">
 
-            <img class="icon" :src="item.icon" />
 
-            <img class="pic" :src="item.pic" />
 
-          </div>
 
-          <div class="p1">{{ item.p1 }}</div>
 
-          <div class="p2">{{ item.p2 }}</div>
 
-        </a>
 
-      </div>
 
-    </div>
 
-
 
-    <van-swipe :autoplay="2000" class="top">
 
-      <van-swipe-item v-for="(image, index) in images" :key="index">
 
-        <img v-lazy="image" />
 
-      </van-swipe-item>
 
-    </van-swipe>
 
-
 
-    <div class="bottom-box">
 
-      <div v-for="(item, index) in 10" :key="index" class="bottom">
 
-        <van-swipe :autoplay="2000" class="bottom-swipe">
 
-          <van-swipe-item v-for="(image, index) in images" :key="index">
 
-            <img v-lazy="image" />
 
-          </van-swipe-item>
 
-        </van-swipe>
 
-        <div class="conten an">
 
-          <h2 class="tit">南瓜小米本草银耳羹（冲泡即食）</h2>
 
-          <p>
 
-            金燕耳本草银耳著名银耳专家研发，吃12种健康食材长大，胶质营养丰富，味甘、淡，性温，是适合每日滋养的耳中珍品。
 
-          </p>
 
-          <a
 
-            href="https://www.ijinyaner.com/donggan/94.html#aaa"
 
-            class="publicMore"
 
-            target="_blank"
 
-            >MORE</a
 
-          >
 
-        </div>
 
-      </div>
 
-    </div>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-import Vue from "vue";
 
-import { Lazyload } from "vant";
 
-
 
-Vue.use(Lazyload);
 
-export default {
 
-  name: "Home",
 
-  data() {
 
-    return {
 
-      activeName: 'a',
 
-      images: [
 
-        "https://www.ijinyaner.com/uploadfile/2021/0114/20210114105511763.jpg",
 
-        "https://www.ijinyaner.com/uploadfile/2020/1030/20201030034302916.jpg",
 
-        "https://www.ijinyaner.com/uploadfile/2020/0820/20200820021337550.jpg",
 
-        "https://www.ijinyaner.com/uploadfile/2019/1213/20191213051007736.jpg"
 
-      ],
 
-      picture: [
 
-        {
 
-          icon:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041602536.png",
 
-          pic:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041557428.jpg",
 
-          p1: "十余种滋补中草药培植 胶质营养是燕窝的3倍",
 
-          p2:
 
-            "Cultivated by a dozen nourishing Chinese herbal medicines, its colloid nutrition is three times that of bird’s nest"
 
-        },
 
-        {
 
-          icon:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041602536.png",
 
-          pic:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041557428.jpg",
 
-          p1: "十余种滋补中草药培植 胶质营养是燕窝的3倍",
 
-          p2:
 
-            "Cultivated by a dozen nourishing Chinese herbal medicines, its colloid nutrition is three times that of bird’s nest"
 
-        },
 
-        {
 
-          icon:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041602536.png",
 
-          pic:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041557428.jpg",
 
-          p1: "十余种滋补中草药培植 胶质营养是燕窝的3倍",
 
-          p2:
 
-            "Cultivated by a dozen nourishing Chinese herbal medicines, its colloid nutrition is three times that of bird’s nest"
 
-        },
 
-        {
 
-          icon:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041602536.png",
 
-          pic:
 
-            "https://www.ijinyaner.com/uploadfile/2019/0419/20190419041557428.jpg",
 
-          p1: "十余种滋补中草药培植 胶质营养是燕窝的3倍",
 
-          p2:
 
-            "Cultivated by a dozen nourishing Chinese herbal medicines, its colloid nutrition is three times that of bird’s nest"
 
-        }
 
-      ]
 
-    };
 
-  },
 
-  components: {}
 
-};
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-.topimg {
 
-  display: flex;
 
-  justify-content: space-between;
 
-  padding: 0 3vw;
 
-  img {
 
-    height: 7vh;
 
-  }
 
-}
 
-.bottom-box {
 
-  display: flex;
 
-  justify-content: center;
 
-  flex-wrap: wrap;
 
-  .tit {
 
-  }
 
-  .publicMore {
 
-    border: 1px solid #ccc;
 
-    padding: 5px;
 
-    border-radius: 10px;
 
-    color: #000;
 
-    background-color: #fff;
 
-  }
 
-}
 
-.bottom {
 
-  background-color: #f4f3f0;
 
-  border-radius: 10px;
 
-  padding: 10px;
 
-  margin: 10px;
 
-  width: 95vw;
 
-  max-width: 500px;
 
-  .conten {
 
-    .tit {
 
-      color: #000;
 
-    }
 
-  }
 
-  .bottom-swipe {
 
-    width: 95vw;
 
-    max-width: 500px;
 
-    height: 95vw;
 
-    max-height: 500px;
 
-    img {
 
-      width: 100%;
 
-      height: 100%;
 
-    }
 
-  }
 
-}
 
-
 
-.top {
 
-  width: 100vw;
 
-  height: 56.25vw;
 
-  background-color: #ccc;
 
-  img {
 
-    width: 100%;
 
-    height: 100%;
 
-  }
 
-}
 
-
 
-.advantage {
 
-  margin: 2vw 0;
 
-  .columnTitle {
 
-    .tit {
 
-      font-size: 7vw;
 
-    }
 
-  }
 
-  .wrap {
 
-    display: flex;
 
-    justify-content: center;
 
-    flex-wrap: wrap;
 
-    .picturebox {
 
-      width: 43vw;
 
-      margin: 2vw 1vw;
 
-      color: #000;
 
-      .picture {
 
-        width: 100%;
 
-        position: relative;
 
-        .icon {
 
-          position: absolute;
 
-          top: 50%;
 
-          left: 50%;
 
-          transform: translate(-50%, -50%);
 
-        }
 
-        .pic {
 
-          width: 50%;
 
-          border-radius: 50%;
 
-        }
 
-      }
 
-      .p1 {
 
-        margin: 2vw 0;
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>

+ 6 - 6
src/main.js
Voir le fichier 

@@ -4,13 +4,13 @@ import router from './router'
 
 
 Vue.config.productionTip = false
 
 
-import Vant from 'vant';
 
-import 'vant/lib/index.css';
 
-Vue.use(Vant);
 
+// import Vant from 'vant';
 
+// import 'vant/lib/index.css';
 
+// Vue.use(Vant);
 
 
-import ElementUI from 'element-ui';
 
-import 'element-ui/lib/theme-chalk/index.css';
 
-Vue.use(ElementUI);
 
+// import ElementUI from 'element-ui';
 
+// import 'element-ui/lib/theme-chalk/index.css';
 
+// Vue.use(ElementUI);
 
 
 new Vue({
 
   router,

+ 20 - 18
src/router/index.js
Voir le fichier 

@@ -1,27 +1,29 @@
 
-import Vue from 'vue'
 
-import VueRouter from 'vue-router'
 
-import Home from '../views/Home.vue'
 
+import Vue from "vue";
 
+import VueRouter from "vue-router";
 
 
-Vue.use(VueRouter)
 
+Vue.use(VueRouter);
 
 
 const routes = [
 
   {
 
-    path: '/',
 
-    name: 'Home',
 
-    component: Home
 
+    path: "/",
 
+    name: "Home",
 
+    component: () => import(/* webpackChunkName: "Mobile" */ "@/views/home"),
 
+    meta: { index: 0 }
 
   },
 
-  // {
 
-  //   path: '/about',
 
-  //   name: 'About',
 
-  //   // route level code-splitting
 
-  //   // this generates a separate chunk (about.[hash].js) for this route
 
-  //   // which is lazy-loaded when the route is visited.
 
-  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
 
-  // }
 
-]
 
+  {
 
+    path: "/shopping",
 
+    name: "shopping",
 
+    component: () =>
 
+      import(/* webpackChunkName: "Mobile" */ "@/views/shopping"),
 
+    meta: { index: 1 }
 
+  }
 
+];
 
 
 const router = new VueRouter({
 
   routes
 
-})
 
+});
 
 
-export default router
 
+router.afterEach(() => {
 
+  window.scrollTo(0, 0);
 
+});
 
+export default router;

+ 0 - 72
src/views/Home.vue
Voir le fichier 

@@ -1,72 +0,0 @@
 
-<template>
 
-  <div class="home">
 
-    <div class="top-menu">
 
-      <img src="@/assets/logo1.jpg" />
 
-      <el-menu
 
-        :default-active="activeIndex"
 
-        class="el-menu-demo"
 
-        mode="horizontal"
 
-        @select="handleSelect"
 
-        width="60vw"
 
-      >
 
-        <el-menu-item index="1">首页</el-menu-item>
 
-        <el-menu-item index="2">产品</el-menu-item>
 
-      </el-menu>
 
-    </div>
 
-
 
-    <!-- <van-tabs v-model="activeName" class="top" sticky>
 
-      <van-tab disabled>
 
-        <template #title> <img src="@/assets/logo1.jpg"/></template>
 
-      </van-tab>
 
-
 
-      <van-tab title="首页" name="a"> -->
 
-    <homePage />
 
-    <!-- </van-tab>
 
-      <van-tab title="标签 2" name="b">内容 2</van-tab>
 
-    </van-tabs> -->
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-import Vue from "vue";
 
-import { Lazyload } from "vant";
 
-import homePage from "@/components/homePage";
 
-
 
-Vue.use(Lazyload);
 
-export default {
 
-  name: "Home",
 
-  data() {
 
-    return {
 
-      activeIndex: "1",
 
-      activeName: "a",
 
-    };
 
-  },
 
-  components: {
 
-    homePage
 
-  }
 
-};
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-@media screen and (min-width: 600px) {
 
-
 
-}
 
-.home{
 
-  width: 100%;
 
-  max-width: 1400px;
 
-  margin: auto;
 
-}
 
-.top {
 
-  img {
 
-    height: 44px;
 
-  }
 
-}
 
-.top-menu{
 
-  display: flex;
 
-  justify-content: space-between;
 
-  padding:0 20px;
 
-  img{
 
-    height: 60px;
 
-  }
 
-}
 
-</style>

+ 88 - 0
src/views/home/index.vue
Voir le fichier 

@@ -0,0 +1,88 @@
 
+<template>
 
+  <div class="home">
 
+    <div class="top">
 
+      <div class="logobox">
 
+        <img class="logo" src="@/assets/img/logo_font.png" />
 
+      </div>
 
+      <img class="logoinfo" src="@/assets/img/logo_info.png" />
 
+      <img class="img" src="@/assets/img/u49.png" />
 
+    </div>
 
+    <div
 
+      class="infobox"
 
+      v-for="(item, index) in 5"
 
+      :key="index"
 
+      :class="index == 0 ? 'first' : ''"
 
+    ></div>
 
+    <div class="goshopping" @click="$router.push('/shopping')">
 
+      <span>查看</span>
 
+      <span>商品</span>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: "Home",
 
+  data() {
 
+    return {};
 
+  },
 
+  components: {}
 
+};
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+@import "@/assets/style/mixin.scss";
 
+.top {
 
+  position: fixed;
 
+  width: 100vw;
 
+  height: 80vw;
 
+  top: 0;
 
+  background-color: rgba(26, 188, 156, 1);
 
+  border: none;
 
+  z-index: 2020;
 
+  .logobox {
 
+    position: absolute;
 
+    left: 50%;
 
+    transform: translateX(-50%);
 
+    top: 0px;
 
+    width: 40vw;
 
+    height: 30vw;
 
+    background-color: #fff;
 
+    border-bottom-left-radius: 30px;
 
+    border-bottom-right-radius: 30px;
 
+    z-index: 2;
 
+    .logo{
 
+      width: 50%;
 
+      position: absolute;
 
+      top: 50%;
 
+      left: 50%;
 
+      transform: translate(-50%,-50%);
 
+    }
 
+  }
 
+  .logoinfo{
 
+    width: 100vw;
 
+    position: relative;
 
+    top: 23vw;
 
+  }
 
+  .img {
 
+    position: absolute;
 
+    left: 0px;
 
+    bottom: -1px;
 
+    width: 100vw;
 
+    height: 10.6666vw;
 
+  }
 
+}
 
+.first {
 
+  margin-top: 85vw !important;
 
+}
 
+.infobox {
 
+  border-width: 0px;
 
+  position: relative;
 
+  width: 92.5333vw;
 
+  margin: 5vw auto;
 
+  height: 165px;
 
+  background-color: rgba(245, 245, 245, 1);
 
+  border-radius: 20px;
 
+}
 
+
 
+</style>

+ 66 - 0
src/views/shopping/index.vue
Voir le fichier 

@@ -0,0 +1,66 @@
 
+<template>
 
+  <div>
 
+    <div class="logobox">
 
+      <img class="logo" src="@/assets/img/logo_font.png" />
 
+    </div>
 
+    <div class="infobox">
 
+      <img id="u71_img" class="img " src="@/assets/img/u71.png" />
 
+    </div>
 
+    <div class="infobox">
 
+      <img id="u71_img" class="img " src="@/assets/img/u73.svg" />
 
+    </div>
 
+    <div class="infobox">
 
+      <img id="u71_img" class="img " src="@/assets/img/u74.svg" />
 
+    </div>
 
+    <div class="infobox">
 
+      <img id="u71_img" class="img " src="@/assets/img/u75.svg" />
 
+    </div>
 
+    <div class="infobox">
 
+      <img id="u71_img" class="img " src="@/assets/img/u75.svg" />
 
+    </div>
 
+    <div class="goshopping" @click="$router.push('/')">
 
+      <span>返回</span>
 
+      <span>首页</span>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {};
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+@import "@/assets/style/mixin.scss";
 
+.logobox {
 
+  position: relative;
 
+  left: 50%;
 
+  transform: translateX(-50%);
 
+  top: 0px;
 
+  width: 40vw;
 
+  height: 30vw;
 
+  background-color: #1ABC9C;
 
+  border-bottom-left-radius: 30px;
 
+  border-bottom-right-radius: 30px;
 
+  z-index: 2;
 
+  .logo {
 
+    width: 50%;
 
+    position: absolute;
 
+    top: 50%;
 
+    left: 50%;
 
+    transform: translate(-50%, -50%);
 
+  }
 
+}
 
+.infobox {
 
+  border-width: 0px;
 
+  position: relative;
 
+  width: 85vw;
 
+  margin: 5vw auto;
 
+  background-color: rgba(245, 245, 245, 1);
 
+  border-radius: 20px;
 
+  .img {
 
+    width: 100%;
 
+    border-radius: 20px;
 
+  }
 
+}
 
+
 
+</style>

Certains fichiers n'ont pas été affichés car il y a eu trop de fichiers modifiés dans ce diff