临时保存

package.json

@@ -9,11 +9,17 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "element-ui": "^2.15.0",
+    "node-sass": "^5.0.0",
+    "sass-loader": "^10.1.1",
+    "vant": "^2.12.4",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.10",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",

src/App.vue

@@ -1,21 +1,9 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view/>
   </div>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -23,6 +11,18 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
 }
 </style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/homePage.vue

@@ -0,0 +1,147 @@
+<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>

src/components/productList.vue

@@ -0,0 +1,213 @@
+<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>

src/main.js

@@ -1,8 +1,18 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
 
 Vue.config.productionTip = false
 
+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);
+
 new Vue({
-  render: h => h(App),
+  router,
+  render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  // {
+  //   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')
+  // }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router

src/views/Home.vue

@@ -0,0 +1,72 @@
+<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>

vue.config.js

@@ -0,0 +1,10 @@
+module.exports={
+    configureWebpack: {
+        name:'银耳首页',
+        resolve: {
+          alias: {
+            '@': '/src'
+          }
+        }
+      },
+}