首頁 探索 說明
註冊 登入
yuhao
/
pengjishengxian
關註 1
讚好 0
複刻 0
檔案 問題管理 1 合併請求 0 Wiki
瀏覽代碼

彭记生鲜官网初始化

yuhao 1 年之前
父節點
2fb9132fe1
當前提交
552e75a50a
共有 22 個文件被更改，包括 12633 次插入 和 1 次删除
分割檢視 顯示文件統計
  1. 23 0
      .gitignore
  2. 18 1
      README.md
  3. 5 0
      babel.config.js
  4. 12227 0
      package-lock.json
  5. 29 0
      package.json
  6. 二進制
      public/favicon.ico
  7. 17 0
      public/index.html
  8. 24 0
      src/App.vue
  9. 二進制
      src/assets/fonts/YeZiGongChangWanNengHeiTi-2.ttf
  10. 9 0
      src/assets/fonts/font.css
  11. 二進制
      src/assets/logo.png
  12. 二進制
      src/assets/公众号二维码.png
  13. 二進制
      src/assets/联系人二维码.png
  14. 二進制
      src/assets/首页2_01.jpg
  15. 二進制
      src/assets/首页2_02.jpg
  16. 二進制
      src/assets/首页2_03.jpg
  17. 二進制
      src/assets/首页2_04.jpg
  18. 15 0
      src/main.js
  19. 27 0
      src/router/index.js
  20. 17 0
      src/utils/rem.js
  21. 198 0
      src/views/Home.vue
  22. 24 0
      vue.config.js

+ 23 - 0
.gitignore
查看文件 

@@ -0,0 +1,23 @@
1 
+.DS_Store
2 
+node_modules
3 
+/dist
4 
+
5 
+
6 
+# local env files
7 
+.env.local
8 
+.env.*.local
9 
+
10 
+# Log files
11 
+npm-debug.log*
12 
+yarn-debug.log*
13 
+yarn-error.log*
14 
+pnpm-debug.log*
15 
+
16 
+# Editor directories and files
17 
+.idea
18 
+.vscode
19 
+*.suo
20 
+*.ntvs*
21 
+*.njsproj
22 
+*.sln
23 
+*.sw?

+ 18 - 1
README.md
查看文件 

@@ -1,3 +1,20 @@
1 1 
 # pengjishengxian
2 2
3 
-彭记生鲜官网
3 
+彭记生鲜官网
4 
+## Project setup
5 
+```
6 
+npm install
7 
+```
8 
+
9 
+### Compiles and hot-reloads for development
10 
+```
11 
+npm run serve
12 
+```
13 
+
14 
+### Compiles and minifies for production
15 
+```
16 
+npm run build
17 
+```
18 
+
19 
+### Customize configuration
20 
+See [Configuration Reference](https://cli.vuejs.org/config/).

+ 5 - 0
babel.config.js
查看文件 

@@ -0,0 +1,5 @@
1 
+module.exports = {
2 
+  presets: [
3 
+    '@vue/cli-plugin-babel/preset'
4 
+  ]
5 
+}

文件差異過大導致無法顯示
+ 12227 - 0
package-lock.json


+ 29 - 0
package.json
查看文件 

@@ -0,0 +1,29 @@
1 
+{
2 
+  "name": "pengjishengxian",
3 
+  "version": "0.1.0",
4 
+  "private": true,
5 
+  "scripts": {
6 
+    "serve": "vue-cli-service serve",
7 
+    "build": "vue-cli-service build"
8 
+  },
9 
+  "dependencies": {
10 
+    "core-js": "^3.6.5",
11 
+    "postcss-px2rem": "^0.3.0",
12 
+    "px2rem-loader": "^0.1.9",
13 
+    "vue": "^2.6.11",
14 
+    "vue-router": "^3.2.0"
15 
+  },
16 
+  "devDependencies": {
17 
+    "@vue/cli-plugin-babel": "~4.5.19",
18 
+    "@vue/cli-plugin-router": "~4.5.19",
19 
+    "@vue/cli-service": "~4.5.19",
20 
+    "less": "^4.2.0",
21 
+    "less-loader": "^5.0.0",
22 
+    "vue-template-compiler": "^2.6.11"
23 
+  },
24 
+  "browserslist": [
25 
+    "> 1%",
26 
+    "last 2 versions",
27 
+    "not dead"
28 
+  ]
29 
+}

二進制
public/favicon.ico
查看文件


+ 17 - 0
public/index.html
查看文件 

@@ -0,0 +1,17 @@
1 
+<!DOCTYPE html>
2 
+<html lang="">
3 
+  <head>
4 
+    <meta charset="utf-8">
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 
+    <title><%= htmlWebpackPlugin.options.title %></title>
9 
+  </head>
10 
+  <body>
11 
+    <noscript>
12 
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 
+    </noscript>
14 
+    <div id="app"></div>
15 
+    <!-- built files will be auto injected -->
16 
+  </body>
17 
+</html>

+ 24 - 0
src/App.vue
查看文件 

@@ -0,0 +1,24 @@
1 
+<template>
2 
+  <div id="app">
3 
+    <router-view/>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  namjse: 'App',
10 
+  data() {
11 
+    return {
12 
+    }
13 
+  },
14 
+}
15 
+</script>
16 
+<style>
17 
+*{
18 
+  padding: 0;
19 
+  margin: 0;
20 
+}
21 
+body{
22 
+  background-color: #fff;
23 
+}
24 
+</style>

二進制
src/assets/fonts/YeZiGongChangWanNengHeiTi-2.ttf
查看文件


+ 9 - 0
src/assets/fonts/font.css
查看文件 

@@ -0,0 +1,9 @@
1 
+@font-face {
2 
+    /* 重命名字体名 */
3 
+    font-family: 'SiYuanHeiTi';
4 
+    /* 引入字体 */
5 
+    src: url('./YeZiGongChangWanNengHeiTi-2.ttf');
6 
+    font-weight: normal;
7 
+    font-style: normal;
8 
+  }
9 
+

二進制
src/assets/logo.png
查看文件


二進制
src/assets/公众号二维码.png
查看文件


二進制
src/assets/联系人二维码.png
查看文件


二進制
src/assets/首页2_01.jpg
查看文件


二進制
src/assets/首页2_02.jpg
查看文件


二進制
src/assets/首页2_03.jpg
查看文件


二進制
src/assets/首页2_04.jpg
查看文件


+ 15 - 0
src/main.js
查看文件 

@@ -0,0 +1,15 @@
1 
+import Vue from 'vue'
2 
+import App from './App.vue'
3 
+import router from './router'
4 
+import less from 'less';
5 
+import '@/utils/rem.js'
6 
+import '@/assets/fonts/font.css'
7 
+Vue.config.productionTip = false
8 
+Vue.use(less);
9 
+
10 
+
11 
+
12 
+new Vue({
13 
+  router,
14 
+  render: h => h(App)
15 
+}).$mount('#app')

+ 27 - 0
src/router/index.js
查看文件 

@@ -0,0 +1,27 @@
1 
+import Vue from 'vue'
2 
+import VueRouter from 'vue-router'
3 
+import Home from '../views/Home.vue'
4 
+
5 
+Vue.use(VueRouter)
6 
+
7 
+const routes = [
8 
+  {
9 
+    path: '/',
10 
+    name: 'Home',
11 
+    component: Home
12 
+  },
13 
+  // {
14 
+  //   path: '/about',
15 
+  //   name: 'About',
16 
+  //   // route level code-splitting
17 
+  //   // this generates a separate chunk (about.[hash].js) for this route
18 
+  //   // which is lazy-loaded when the route is visited.
19 
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
20 
+  // }
21 
+]
22 
+
23 
+const router = new VueRouter({
24 
+  routes
25 
+})
26 
+
27 
+export default router

+ 17 - 0
src/utils/rem.js
查看文件 

@@ -0,0 +1,17 @@
1 
+// rem等比适配配置文件
2 
+// 基准大小
3 
+const baseSize = 16
4 
+// 设置 rem 函数
5 
+function setRem () {
6 
+  // 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
7 
+  const scale = document.documentElement.clientWidth / 1920
8 
+  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
9 
+  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
10 
+}
11 
+// 初始化
12 
+setRem()
13 
+// 改变窗口大小时重新设置 rem
14 
+window.onresize = function () {
15 
+  setRem()
16 
+}
17 
+

+ 198 - 0
src/views/Home.vue
查看文件 

@@ -0,0 +1,198 @@
1 
+<template>
2 
+  <div>
3 
+    <div id="top"></div>
4 
+    <div class="nav">
5 
+      <img src="@/assets/logo.png" alt="">
6 
+      <div  @click="go('#top')" :class="{ title: true, highlight: classStyle == '#top' }">首页</div>
7 
+      <div @click="go('#classify')" :class="{ title: true, highlight: classStyle == '#classify' }">明星产品</div>
8 
+      <div @click="go('#teamwork')" :class="{ title: true, highlight: classStyle == '#teamwork' }">合作伙伴</div>
9 
+      <div @click="go('#we')" :class="{ title: true, highlight: classStyle == '#we' }">关于我们</div>
10 
+    </div>
11 
+    <div class="top_img">
12 
+      <img src="@/assets/首页2_01.jpg" alt="">
13 
+    </div>
14 
+    <div class="classify">
15 
+      <img id="classify" src="@/assets/首页2_02.jpg" alt="">
16 
+    </div>
17 
+    <div id="teamwork" class="teamwork">
18 
+      <img src="@/assets/首页2_03.jpg" alt="">
19 
+    </div>
20 
+    <div class="we">
21 
+      <img id="we" src="@/assets/首页2_04.jpg" alt="">
22 
+    </div>
23 
+    <div class="footer">
24 
+      <div class="top-box">
25 
+        <img class="bottom-logo" src="@/assets/logo.png" alt="">
26 
+        <div @click="go('#classify')" :class="{titlBottom:true,highlight2:classStyle == '#classify'}">明星产品</div>
27 
+        <div @click="go('#teamwork')" :class="{titlBottom:true,highlight2:classStyle == '#teamwork'}">合作伙伴</div>
28 
+        <div @click="go('#we')" :class="{titlBottom:true,highlight2:classStyle == '#we'}">关于我们</div>
29 
+      </div>
30 
+      <div class="bot-box">
31 
+        <div class="titlBottom">联系我们</div>
32 
+        <div>havana@fjpjsxspyxgs.wecom.work</div>
33 
+        <div>18680316062</div>
34 
+        <div class="img-box">
35 
+          <div class="img-box2">
36 
+            <img src="@/assets/联系人二维码.png" alt="">
37 
+            <div>联系人微信</div>
38 
+          </div>
39 
+        <div class="img-box2">
40 
+          <img src="@/assets/公众号二维码.png" alt="">
41 
+          <div>微信公众号</div>
42 
+        </div>
43 
+        </div>
44 
+      </div>
45 
+    </div>
46 
+  </div>
47 
+</template>
48 
+
49 
+<script>
50 
+export default {
51 
+  data() {
52 
+    return {
53 
+      classStyle: '#top'
54 
+    }
55 
+  },
56 
+  methods: {
57 
+    go(selector) {
58 
+      this.classStyle = selector
59 
+      document.querySelector(selector).scrollIntoView({
60 
+        // 不想要滚动动画,则设置为"instant"
61 
+        behavior: 'smooth', // 滚动动画
62 
+        block: 'start',
63 
+        alignToTop: 'true'
64 
+      });
65 
+    }
66 
+  }
67 
+}
68 
+</script>
69 
+
70 
+<style scoped lang="less">
71 
+.highlight {
72 
+   font-weight: 700;
73 
+   color: #1c4b9d !important;
74 
+   position: relative;
75 
+ }
76 
+ .highlight2{
77 
+  font-weight: 700;
78 
+   color: #1c4b9d !important;
79 
+ }
80 
+ .highlight::after {
81 
+        position: absolute;
82 
+        content: "";
83 
+        width: 22px;
84 
+        height: 8px;
85 
+        display: block;
86 
+        background-color: #1c4a9e;
87 
+        margin-top: 14px;
88 
+        border-radius: 10px;
89 
+        left: 50%;
90 
+        transform: translateX(-50%);
91 
+ }
92 
+
93 
+ .a {
94 
+   height: 1000px;
95 
+   color: red;
96 
+ }
97 
+
98 
+ .nav {
99 
+   width: 100%;
100 
+   height: 115px;
101 
+   display: flex;
102 
+   justify-content: center;
103 
+   align-items: center;
104 
+
105 
+   img {
106 
+     height: 100%;
107 
+     margin-right: 98px;
108 
+     height: 140px;
109 
+   }
110 
+
111 
+   .title {
112 
+    font-family: SiYuanHeiTi;
113 
+     margin-right: 98px;
114 
+     font-size: 22px;
115 
+     color: #555555;
116 
+     cursor: pointer;
117 
+   }
118 
+ }
119 
+
120 
+ .top_img {
121 
+   height: 645px;
122 
+   width: 100%;
123 
+
124 
+   img {
125 
+     width: 100%;
126 
+   }
127 
+ }
128 
+
129 
+ .classify {
130 
+   width: 100%;
131 
+
132 
+   img {
133 
+     width: 100%;
134 
+   }
135 
+ }
136 
+
137 
+ .teamwork {
138 
+   img {
139 
+     width: 100%;
140 
+   }
141 
+ }
142 
+
143 
+ .we {
144 
+   img {
145 
+     width: 100%;
146 
+   }
147 
+ }
148 
+
149 
+ .footer {
150 
+   height: 395px;
151 
+   width: 100%;
152 
+   background-color: #eeeeee;
153 
+   padding-top: 60px;
154 
+   box-sizing: border-box;
155 
+   display: flex;
156 
+   justify-content: center;
157 
+   font-family: SiYuanHeiTi;
158 
+   font-size: 22px;
159 
+   align-items: flex-start;
160 
+   .top-box {
161 
+     display: flex;
162 
+     justify-content: center;
163 
+     align-items: flex-start;
164 
+     div {
165 
+       cursor: pointer;
166 
+     }
167 
+
168 
+     .bottom-logo {
169 
+       height: 140px;
170 
+       margin-right: 84px;
171 
+       margin-top: -45px;
172 
+     }
173 
+
174 
+     .titlBottom {
175 
+       margin-right: 84px;
176 
+       color: #575757;
177 
+     }
178 
+   }
179 
+
180 
+   .bot-box {
181 
+     color: #575757;
182 
+    div{
183 
+      margin-bottom: 6px;
184 
+    }
185 
+    .img-box{
186 
+      display: flex;
187 
+      margin-top: 10px;
188 
+      .img-box2{
189 
+        text-align: center;
190 
+        margin-right: 18px;
191 
+      }
192 
+      img {
193 
+        height: 164px;
194 
+        margin-bottom: 4px;
195 
+      }
196 
+    }
197 
+   }
198 
+ }</style>

+ 24 - 0
vue.config.js
查看文件 

@@ -0,0 +1,24 @@
1 
+// 引入等比适配插件
2 
+const px2rem = require('postcss-px2rem')
3 
+
4 
+// 配置基本大小
5 
+const postcss = px2rem({
6 
+    // 基准大小 baseSize，需要和rem.js中相同
7 
+    remUnit: 16
8 
+})
9 
+
10 
+
11 
+module.exports = {
12 
+    publicPath: './',  // 基本路径
13 
+    outputDir: 'dist', // 构建时的输出目录
14 
+    assetsDir: 'static', // 放置静态资源的目录
15 
+    css: {
16 
+        loaderOptions: {
17 
+            postcss: {
18 
+                plugins: [
19 
+                    postcss
20 
+                ]
21 
+            }
22 
+        }
23 
+    }
24 
+}