Skip to content

dev / baohui-jewelry-pro

Go to a project
Toggle navigation
Toggle navigation pinning
97cfac9a by simon
Options

no message

1 parent 7fec4592
Expand all
Inline Side-by-side
Showing 28 changed files with 896 additions and 163 deletions
...@@ -763,6 +763,7 @@ ...@@ -763,6 +763,7 @@
763 "version": "7.4.5", 763 "version": "7.4.5",
764 "resolved": "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.4.5.tgz", 764 "resolved": "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.4.5.tgz",
765 "integrity": "sha1-WCu1MfX53GfS/LaCl5iU914lPxI=", 765 "integrity": "sha1-WCu1MfX53GfS/LaCl5iU914lPxI=",
766 "dev": true,
766 "requires": { 767 "requires": {
767 "regenerator-runtime": "^0.13.2" 768 "regenerator-runtime": "^0.13.2"
768 } 769 }
...@@ -969,15 +970,11 @@ ...@@ -969,15 +970,11 @@
969 "integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=", 970 "integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=",
970 "dev": true 971 "dev": true
971 }, 972 },
972 "@vant/icons": {
973 "version": "1.1.7",
974 "resolved": "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.1.7.tgz",
975 "integrity": "sha1-KVYa3/+mp1DSedzNvpppt0OTTz8="
976 },
977 "@vue/babel-helper-vue-jsx-merge-props": { 973 "@vue/babel-helper-vue-jsx-merge-props": {
978 "version": "1.0.0", 974 "version": "1.0.0",
979 "resolved": "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz", 975 "resolved": "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
980 "integrity": "sha1-BI/leZWNpAj7eosqPsBQtQpmEEA=" 976 "integrity": "sha1-BI/leZWNpAj7eosqPsBQtQpmEEA=",
977 "dev": true
981 }, 978 },
982 "@vue/babel-plugin-transform-vue-jsx": { 979 "@vue/babel-plugin-transform-vue-jsx": {
983 "version": "1.0.0", 980 "version": "1.0.0",
...@@ -5412,7 +5409,8 @@ ...@@ -5412,7 +5409,8 @@
5412 "ansi-regex": { 5409 "ansi-regex": {
5413 "version": "2.1.1", 5410 "version": "2.1.1",
5414 "bundled": true, 5411 "bundled": true,
5415 "dev": true 5412 "dev": true,
5413 "optional": true
5416 }, 5414 },
5417 "aproba": { 5415 "aproba": {
5418 "version": "1.2.0", 5416 "version": "1.2.0",
...@@ -5433,12 +5431,14 @@ ...@@ -5433,12 +5431,14 @@
5433 "balanced-match": { 5431 "balanced-match": {
5434 "version": "1.0.0", 5432 "version": "1.0.0",
5435 "bundled": true, 5433 "bundled": true,
5436 "dev": true 5434 "dev": true,
5435 "optional": true
5437 }, 5436 },
5438 "brace-expansion": { 5437 "brace-expansion": {
5439 "version": "1.1.11", 5438 "version": "1.1.11",
5440 "bundled": true, 5439 "bundled": true,
5441 "dev": true, 5440 "dev": true,
5441 "optional": true,
5442 "requires": { 5442 "requires": {
5443 "balanced-match": "^1.0.0", 5443 "balanced-match": "^1.0.0",
5444 "concat-map": "0.0.1" 5444 "concat-map": "0.0.1"
...@@ -5453,17 +5453,20 @@ ...@@ -5453,17 +5453,20 @@
5453 "code-point-at": { 5453 "code-point-at": {
5454 "version": "1.1.0", 5454 "version": "1.1.0",
5455 "bundled": true, 5455 "bundled": true,
5456 "dev": true 5456 "dev": true,
5457 "optional": true
5457 }, 5458 },
5458 "concat-map": { 5459 "concat-map": {
5459 "version": "0.0.1", 5460 "version": "0.0.1",
5460 "bundled": true, 5461 "bundled": true,
5461 "dev": true 5462 "dev": true,
5463 "optional": true
5462 }, 5464 },
5463 "console-control-strings": { 5465 "console-control-strings": {
5464 "version": "1.1.0", 5466 "version": "1.1.0",
5465 "bundled": true, 5467 "bundled": true,
5466 "dev": true 5468 "dev": true,
5469 "optional": true
5467 }, 5470 },
5468 "core-util-is": { 5471 "core-util-is": {
5469 "version": "1.0.2", 5472 "version": "1.0.2",
...@@ -5580,7 +5583,8 @@ ...@@ -5580,7 +5583,8 @@
5580 "inherits": { 5583 "inherits": {
5581 "version": "2.0.3", 5584 "version": "2.0.3",
5582 "bundled": true, 5585 "bundled": true,
5583 "dev": true 5586 "dev": true,
5587 "optional": true
5584 }, 5588 },
5585 "ini": { 5589 "ini": {
5586 "version": "1.3.5", 5590 "version": "1.3.5",
...@@ -5592,6 +5596,7 @@ ...@@ -5592,6 +5596,7 @@
5592 "version": "1.0.0", 5596 "version": "1.0.0",
5593 "bundled": true, 5597 "bundled": true,
5594 "dev": true, 5598 "dev": true,
5599 "optional": true,
5595 "requires": { 5600 "requires": {
5596 "number-is-nan": "^1.0.0" 5601 "number-is-nan": "^1.0.0"
5597 } 5602 }
...@@ -5606,6 +5611,7 @@ ...@@ -5606,6 +5611,7 @@
5606 "version": "3.0.4", 5611 "version": "3.0.4",
5607 "bundled": true, 5612 "bundled": true,
5608 "dev": true, 5613 "dev": true,
5614 "optional": true,
5609 "requires": { 5615 "requires": {
5610 "brace-expansion": "^1.1.7" 5616 "brace-expansion": "^1.1.7"
5611 } 5617 }
...@@ -5613,12 +5619,14 @@ ...@@ -5613,12 +5619,14 @@
5613 "minimist": { 5619 "minimist": {
5614 "version": "0.0.8", 5620 "version": "0.0.8",
5615 "bundled": true, 5621 "bundled": true,
5616 "dev": true 5622 "dev": true,
5623 "optional": true
5617 }, 5624 },
5618 "minipass": { 5625 "minipass": {
5619 "version": "2.3.5", 5626 "version": "2.3.5",
5620 "bundled": true, 5627 "bundled": true,
5621 "dev": true, 5628 "dev": true,
5629 "optional": true,
5622 "requires": { 5630 "requires": {
5623 "safe-buffer": "^5.1.2", 5631 "safe-buffer": "^5.1.2",
5624 "yallist": "^3.0.0" 5632 "yallist": "^3.0.0"
...@@ -5637,6 +5645,7 @@ ...@@ -5637,6 +5645,7 @@
5637 "version": "0.5.1", 5645 "version": "0.5.1",
5638 "bundled": true, 5646 "bundled": true,
5639 "dev": true, 5647 "dev": true,
5648 "optional": true,
5640 "requires": { 5649 "requires": {
5641 "minimist": "0.0.8" 5650 "minimist": "0.0.8"
5642 } 5651 }
...@@ -5717,7 +5726,8 @@ ...@@ -5717,7 +5726,8 @@
5717 "number-is-nan": { 5726 "number-is-nan": {
5718 "version": "1.0.1", 5727 "version": "1.0.1",
5719 "bundled": true, 5728 "bundled": true,
5720 "dev": true 5729 "dev": true,
5730 "optional": true
5721 }, 5731 },
5722 "object-assign": { 5732 "object-assign": {
5723 "version": "4.1.1", 5733 "version": "4.1.1",
...@@ -5729,6 +5739,7 @@ ...@@ -5729,6 +5739,7 @@
5729 "version": "1.4.0", 5739 "version": "1.4.0",
5730 "bundled": true, 5740 "bundled": true,
5731 "dev": true, 5741 "dev": true,
5742 "optional": true,
5732 "requires": { 5743 "requires": {
5733 "wrappy": "1" 5744 "wrappy": "1"
5734 } 5745 }
...@@ -5814,7 +5825,8 @@ ...@@ -5814,7 +5825,8 @@
5814 "safe-buffer": { 5825 "safe-buffer": {
5815 "version": "5.1.2", 5826 "version": "5.1.2",
5816 "bundled": true, 5827 "bundled": true,
5817 "dev": true 5828 "dev": true,
5829 "optional": true
5818 }, 5830 },
5819 "safer-buffer": { 5831 "safer-buffer": {
5820 "version": "2.1.2", 5832 "version": "2.1.2",
...@@ -5850,6 +5862,7 @@ ...@@ -5850,6 +5862,7 @@
5850 "version": "1.0.2", 5862 "version": "1.0.2",
5851 "bundled": true, 5863 "bundled": true,
5852 "dev": true, 5864 "dev": true,
5865 "optional": true,
5853 "requires": { 5866 "requires": {
5854 "code-point-at": "^1.0.0", 5867 "code-point-at": "^1.0.0",
5855 "is-fullwidth-code-point": "^1.0.0", 5868 "is-fullwidth-code-point": "^1.0.0",
...@@ -5869,6 +5882,7 @@ ...@@ -5869,6 +5882,7 @@
5869 "version": "3.0.1", 5882 "version": "3.0.1",
5870 "bundled": true, 5883 "bundled": true,
5871 "dev": true, 5884 "dev": true,
5885 "optional": true,
5872 "requires": { 5886 "requires": {
5873 "ansi-regex": "^2.0.0" 5887 "ansi-regex": "^2.0.0"
5874 } 5888 }
...@@ -5912,12 +5926,14 @@ ...@@ -5912,12 +5926,14 @@
5912 "wrappy": { 5926 "wrappy": {
5913 "version": "1.0.2", 5927 "version": "1.0.2",
5914 "bundled": true, 5928 "bundled": true,
5915 "dev": true 5929 "dev": true,
5930 "optional": true
5916 }, 5931 },
5917 "yallist": { 5932 "yallist": {
5918 "version": "3.0.3", 5933 "version": "3.0.3",
5919 "bundled": true, 5934 "bundled": true,
5920 "dev": true 5935 "dev": true,
5936 "optional": true
5921 } 5937 }
5922 } 5938 }
5923 }, 5939 },
...@@ -10169,7 +10185,8 @@ ...@@ -10169,7 +10185,8 @@
10169 "regenerator-runtime": { 10185 "regenerator-runtime": {
10170 "version": "0.13.2", 10186 "version": "0.13.2",
10171 "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.2.tgz", 10187 "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.2.tgz",
10172 "integrity": "sha1-MuWcmm+5saSv8JtJMMotRHc0NEc=" 10188 "integrity": "sha1-MuWcmm+5saSv8JtJMMotRHc0NEc=",
10189 "dev": true
10173 }, 10190 },
10174 "regenerator-transform": { 10191 "regenerator-transform": {
10175 "version": "0.14.0", 10192 "version": "0.14.0",
...@@ -10520,7 +10537,8 @@ ...@@ -10520,7 +10537,8 @@
10520 "version": "4.0.8", 10537 "version": "4.0.8",
10521 "resolved": "https://registry.npm.taobao.org/rx-lite/download/rx-lite-4.0.8.tgz", 10538 "resolved": "https://registry.npm.taobao.org/rx-lite/download/rx-lite-4.0.8.tgz",
10522 "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=", 10539 "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
10523 "dev": true 10540 "dev": true,
10541 "optional": true
10524 }, 10542 },
10525 "rx-lite-aggregates": { 10543 "rx-lite-aggregates": {
10526 "version": "4.0.8", 10544 "version": "4.0.8",
...@@ -12413,17 +12431,6 @@ ...@@ -12413,17 +12431,6 @@
12413 "spdx-expression-parse": "^3.0.0" 12431 "spdx-expression-parse": "^3.0.0"
12414 } 12432 }
12415 }, 12433 },
12416 "vant": {
12417 "version": "1.6.21",
12418 "resolved": "https://registry.npm.taobao.org/vant/download/vant-1.6.21.tgz",
12419 "integrity": "sha1-7MdP1p/ND6EeQX5Q9XaEsFPgyzw=",
12420 "requires": {
12421 "@babel/runtime": "^7.4.3",
12422 "@vant/icons": "1.1.7",
12423 "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.3",
12424 "vue-lazyload": "1.2.3"
12425 }
12426 },
12427 "vary": { 12434 "vary": {
12428 "version": "1.1.2", 12435 "version": "1.1.2",
12429 "resolved": "http://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz", 12436 "resolved": "http://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz",
...@@ -12505,11 +12512,6 @@ ...@@ -12505,11 +12512,6 @@
12505 "integrity": "sha1-J1b0bLMlgFTF9HI96K5+hzAqHM8=", 12512 "integrity": "sha1-J1b0bLMlgFTF9HI96K5+hzAqHM8=",
12506 "dev": true 12513 "dev": true
12507 }, 12514 },
12508 "vue-lazyload": {
12509 "version": "1.2.3",
12510 "resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz",
12511 "integrity": "sha1-kB+ewVx+bKeHgaK65KNDaGve2yw="
12512 },
12513 "vue-loader": { 12515 "vue-loader": {
12514 "version": "15.7.0", 12516 "version": "15.7.0",
12515 "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.7.0.tgz", 12517 "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.7.0.tgz",
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 "mockjs": "^1.0.1-beta3", 21 "mockjs": "^1.0.1-beta3",
22 "postcss-px2rem": "^0.3.0", 22 "postcss-px2rem": "^0.3.0",
23 "postcss-pxtorem": "^4.0.1", 23 "postcss-pxtorem": "^4.0.1",
24 "vant": "^1.6.21", 24 "vant": "^2.2.11",
25 "vue": "^2.6.10", 25 "vue": "^2.6.10",
26 "vue-router": "^3.0.3", 26 "vue-router": "^3.0.3",
27 "vuex": "^3.0.1" 27 "vuex": "^3.0.1"
......
...@@ -8,16 +8,15 @@ ...@@ -8,16 +8,15 @@
8 <meta name="viewport" 8 <meta name="viewport"
9 content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 9 content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
10 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 10 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
11 <title>vue-cli3-framework</title> 11 <title>宝汇珠宝</title>
12 </head> 12 </head>
13 13
14 <body> 14 <body>
15 <noscript> 15 <noscript>
16 <strong>We're sorry but vue-cli3-framework doesn't work properly without JavaScript enabled. Please enable it to 16 <strong>您的浏览器有点历史了，请升级新的浏览器~</strong>
17 continue.</strong>
18 </noscript> 17 </noscript>
19 <div id="app"></div> 18 <div id="app"></div>
20 <!-- built files will be auto injected --> 19 <!-- built files will be auto injected -->
21 </body> 20 </body>
22 21
23 </html>
...\ No newline at end of file ...\ No newline at end of file
22 </html>
......
1 <template> 1 <template>
2 <div id="app"> 2 <div id="app">
3 <!-- <div id="nav">
4 <router-link to="/">Home</router-link> |
5 <router-link to="/about">About</router-link>
6 </div>-->
7 <router-view/> 3 <router-view/>
8 </div> 4 </div>
9 </template> 5 </template>
...@@ -22,6 +18,7 @@ ...@@ -22,6 +18,7 @@
22 margin: 0; 18 margin: 0;
23 padding: 0; 19 padding: 0;
24 font-size: 20px; 20 font-size: 20px;
21 color: #333333;
25 } 22 }
26 23
27 body, 24 body,
...@@ -31,6 +28,12 @@ div { ...@@ -31,6 +28,12 @@ div {
31 padding: 0; 28 padding: 0;
32 } 29 }
33 30
31 input {
32 background: none;
33 outline: none;
34 border: none;
35 }
36
34 .app__width { 37 .app__width {
35 width: 750px; 38 width: 750px;
36 } 39 }
...@@ -87,4 +90,28 @@ div { ...@@ -87,4 +90,28 @@ div {
87 height: 20px; 90 height: 20px;
88 } 91 }
89 } 92 }
93
94 // 产品详情页面
95 .page-product-detail {
96 .van-swipe__indicator {
97 width: 20px;
98 height: 20px;
99 }
100
101 [class*="van-hairline"]::after {
102 border: none;
103 }
104 .van-sticky {
105 border-bottom: 1px solid #ebedf0;
106 }
107 }
108
109 // 我的收藏
110 .page-favorite {
111 .van-tabs__wrap {
112 }
113 .van-tab {
114
115 }
116 }
90 </style> 117 </style>
......
...@@ -13,11 +13,17 @@ Vue.config.productionTip = false ...@@ -13,11 +13,17 @@ Vue.config.productionTip = false
13 import { 13 import {
14 Swipe, 14 Swipe,
15 SwipeItem, 15 SwipeItem,
16 Lazyload 16 Lazyload,
17 Tab,
18 Tabs,
19 Sticky
17 } from 'vant'; 20 } from 'vant';
18 21
19 Vue.use(Swipe).use(SwipeItem); 22 Vue.use(Swipe).use(SwipeItem);
20 Vue.use(Lazyload); 23 Vue.use(Lazyload);
24 Vue.use(Tab).use(Tabs);
25 Vue.use(Sticky);
26
21 27
22 new Vue({ 28 new Vue({
23 router, 29 router,
......
1 import api from '../../api/api' 1 import api from '../../api/api'
2 import { 2 import {
3 httpGet, 3 httpGet,
4 httpPost 4 httpPost
5 } from '../../api/fetch-api.js' 5 } from '../../api/fetch-api.js'
6 6
7 export default { 7 export default {
8 data() { 8 data() {
9 return { 9 return {
10 key: 'value' 10 key: 'value',
11 } 11 active: 0,
12 images: [
13 'https://img.yzcdn.cn/vant/apple-1.jpg',
14 'https://img.yzcdn.cn/vant/apple-2.jpg'
15 ],
16 sticky: true,
17 }
18 },
19 components: {},
20 methods: {
21 onFavoriteHandler() {
22
12 }, 23 },
13 components: {}, 24 onContactUsHandler() {
14 methods: { 25
15 initData() {}
16 }, 26 },
17 mounted() {},
18 created() {
19 console.log("demo created");
20 }
21 }
...\ No newline at end of file ...\ No newline at end of file
27 onNavHandler(index, title) {
28 // document.getElementById("scroll" + index).scrollIntoView({
29 // behavior: "smooth",
30 // });
31 },
32 initData() {}
33 },
34 mounted() {},
35 created() {}
36 }
......
1 @import './../../styles/support';
2
3 .page {}
4
5 .nav {
6 @extend .bb;
7 display: flex;
8 justify-content: center;
9 align-items: center;
10
11
12 &-v-line {
13 width: 4px;
14 height: 45px;
15 background-color: #adadad;
16 }
17
18 &-item {
19 color: #adadad;
20 position: relative;
21 @extend .bb;
22 padding: 0 40;
23 text-align: center;
24 width: 100%;
25 height: 112px;
26 padding-top: 32px;
27 font-size: 30px;
28
29 }
30
31 .active {
32 color: #c28585;
33
34 .under {
35 position: absolute;
36 height: 3px;
37 width: 112px;
38 background-color: #c28585;
39 left: 0;
40 right: 0;
41 bottom: 24px;
42 margin: 0 auto;
43 }
44 }
45 }
46
47 .shop-list {
48 width: $contentWidth;
49 margin: 54px auto 0;
50 }
51
52 // 店铺信息
53 .shop {
54
55 display: flex;
56 align-items: center;
57 margin: 0 auto 48px;
58 height: auto;
59
60 &-icon {
61 width: 120px;
62 height: 120px;
63 border-radius: 120px;
64 border: solid 1px #333333;
65 }
66
67 &-detail {
68 flex: 1;
69 @extend .bb;
70 height: 120px;
71 padding: 0 12px 0 24px;
72 flex-wrap: wrap;
73 display: flex;
74 align-content: space-between;
75 height: auto;
76
77 div {
78 width: 100%;
79 }
80
81 &-title {
82 font-size: 28px;
83 }
84
85 &-desc {
86 font-size: 18px;
87 }
88 }
89
90 &-btn-wrap {
91 .shop-btn {
92 @include btc(148px, 52px);
93 background-color: #cc9999;
94 border-radius: 52px;
95 color: #ffffff;
96 margin: 12px 0;
97 font-size: 24px;
98 }
99
100 .shop-btn2 {
101 background: transparent;
102 border: solid 1px #ffffff;
103 }
104 }
105
106
107 }
1
2 <template>
3 <div class="page">
4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div>
6 <div class="app__content main">
7 <div class="top-space"></div>
8 <div class="nav">
9 <div class="nav-item active">
10 收藏的店铺
11 <div class="under"></div>
12 </div>
13 <div class="nav-v-line"></div>
14 <div class="nav-item">
15 收藏的商品
16 <div class="under"></div>
17 </div>
18 </div>
19 <div class="content">
20 <div class="shop-list">
21 <div class="shop" v-for="(item,index) in 4" :key="index">
22 <div class="shop-icon"></div>
23 <div class="shop-detail">
24 <div class="cTitle shop-detail-title">xxx珠宝首饰有限公司</div>
25 <div class="shop-detail-desc">
26 <div class="t1">15012341234</div>
27 <div class="t1">广州市番禺区xx路宝汇珠宝交易中心888号</div>
28 <div class="t1">mail@baohui.com</div>
29 </div>
30 </div>
31 <div class="shop-btn-wrap">
32 <div @click="onFavoriteHandler" class="shop-btn">查看店铺</div>
33 </div>
34 </div>
35 </div>
36 </div>
37 </div>
38 </div>
39 </template>
40
41 <script src="./favorite.js"></script>
42 <style lang="scss" scoped>
43 @import "./favorite.scss";
44 </style>
...@@ -16,6 +16,16 @@ export default { ...@@ -16,6 +16,16 @@ export default {
16 }, 16 },
17 components: {}, 17 components: {},
18 methods: { 18 methods: {
19 toProduct(item) {
20 this.$router.push({
21 path: "/product/detail"
22 })
23 },
24 toMyFavorite(){
25 this.$router.push({
26 path:"/favorite"
27 })
28 },
19 initData() {} 29 initData() {}
20 }, 30 },
21 mounted() {}, 31 mounted() {},
......
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
10 @extend .bb; 10 @extend .bb;
11 width: $screenWidth; 11 width: $screenWidth;
12 12
13
14 .swiper { 13 .swiper {
15 width: $screenWidth; 14 width: $screenWidth;
16 height: 400px; 15 height: 400px;
......
1 1
2 <template> 2 <template>
3 <div class="page page-index"> 3 <div class="page cPageBottom page-index">
4 <div class="app__bgc bgc"></div> 4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div> 5 <div class="app__bg bg"></div>
6 <div class="app__content main"> 6 <div class="app__content main">
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
27 <div class="sel-item sel-item-4"> 27 <div class="sel-item sel-item-4">
28 K金<br>首饰 28 K金<br>首饰
29 </div> 29 </div>
30 <div class="sel-item sel-item-5"> 30 <div class="sel-item sel-item-5" @click="toMyFavorite">
31 我的<br>收藏 31 我的<br>收藏
32 </div> 32 </div>
33 </div> 33 </div>
...@@ -36,19 +36,7 @@ ...@@ -36,19 +36,7 @@
36 <div class="product"> 36 <div class="product">
37 <div class="product-title">-- 产品推荐 --</div> 37 <div class="product-title">-- 产品推荐 --</div>
38 <div class="product-list"> 38 <div class="product-list">
39 <div class="item"> 39 <div @click="toProduct(item)" v-for="(item,index) in 6" :key="index" class="item">
40 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
41 <div class="desc">黄金吊坠</div>
42 </div>
43 <div class="item">
44 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
45 <div class="desc">黄金吊坠</div>
46 </div>
47 <div class="item">
48 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
49 <div class="desc">黄金吊坠</div>
50 </div>
51 <div class="item">
52 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt=""> 40 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
53 <div class="desc">黄金吊坠</div> 41 <div class="desc">黄金吊坠</div>
54 </div> 42 </div>
......
1 @import './../../styles/support';
1
2 <template>
3 <div class="page">
4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div>
6 <div class="app__content main">
7 <div class="top-space"></div>
8 <div class="content">
9 </div>
10 </div>
11 </div>
12 </template>
13
14 <script src="./index.js"></script>
15 <style lang="scss" scoped>
16 // @import './index.scss';
17 </style>
...\ No newline at end of file ...\ No newline at end of file
1 @import './../../styles/support';
1
2 <template>
3 <div class="page">
4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div>
6 <div class="app__content main">
7 <div class="top-space"></div>
8 <div class="content">
9 </div>
10 </div>
11 </div>
12 </template>
13
14 <script src="./index.js"></script>
15 <style lang="scss" scoped>
16 // @import './index.scss';
17 </style>
...\ No newline at end of file ...\ No newline at end of file
1 import api from '../../api/api' 1 import api from '../../api/api'
2 import { 2 import {
3 httpGet, 3 httpGet,
4 httpPost 4 httpPost
5 } from '../../api/fetch-api.js' 5 } from '../../api/fetch-api.js'
6 6
7 export default { 7 export default {
8 data() { 8 data() {
9 return { 9 return {
10 key: 'value' 10 key: 'value',
11 } 11 active: 0,
12 images: [
13 'https://img.yzcdn.cn/vant/apple-1.jpg',
14 'https://img.yzcdn.cn/vant/apple-2.jpg'
15 ],
16 sticky: true,
17 }
18 },
19 components: {},
20 methods: {
21 onNavHandler(index, title) {
22 document.getElementById("scroll" + index).scrollIntoView({
23 behavior: "smooth",
24 });
12 }, 25 },
13 components: {}, 26 toTop() {
14 methods: { 27 document.getElementById("scroll0").scrollIntoView({
15 initData() {} 28 behavior: "smooth",
29 });
16 }, 30 },
17 mounted() {},
18 created() {
19 console.log("demo created");
20 }
21 }
...\ No newline at end of file ...\ No newline at end of file
31 toShopDetail(){
32 this.$router.push({
33 path:"/shop/detail"
34 })
35 },
36 initData() {}
37 },
38 mounted() {},
39 created() {}
40 }
......
1 @import './../../styles/support';
2
3 .page {}
4
5 // 分页导航
6 .nav {
7 .tabs {
8 @extend .bb;
9 padding: 0 50px;
10 background-color: #ffffff;
11 }
12 }
13
14 // 轮播banner
15 .banner {
16 $bannerWid: $screenWidth;
17 $bannerHei: 760px;
18 background-color: #f2f2f2;
19 @extend .bb;
20 width: $bannerWid;
21 height: $bannerHei;
22
23 .swiper {
24 width: $bannerWid;
25 height: $bannerHei;
26
27 .img {
28 width: $bannerWid;
29 height: $bannerHei;
30 }
31 }
32 }
33
34 .content {
35 width: $contentWidth;
36 margin: 0 auto;
37 }
38
39 // 功能导航
40 .func {
41 margin: 42px auto;
42 display: flex;
43 justify-content: space-between;
44 align-items: center;
45
46 .desc {
47 &-tit {}
48
49 &-desc {
50 margin-top: 12px;
51 }
52
53 }
54
55 .fav {
56 text-align: center;
57 color: #cf9e9e;
58 padding: 0 24px;
59
60 &-icon {
61 @extend .bb;
62 width: 100%;
63
64 .iconfont {
65 font-size: 52px;
66 }
67 }
68
69 .btn {
70 margin-top: 12px;
71 }
72 }
73 }
74
75 // 店铺信息
76 .shop {
77 margin: 92px auto 0;
78 display: flex;
79 align-items: center;
80
81 &-icon {
82 width: 100px;
83 height: 100px;
84 border-radius: 100px;
85 border: solid 1px #333333;
86 }
87
88 &-detail {
89 flex: 1;
90 @extend .bb;
91 padding-left: 24px;
92 display: flex;
93 align-content: center;
94 flex-wrap: wrap;
95
96 div {
97 width: 100%;
98 margin: 2px 0;
99 }
100
101 &-title {
102 font-size: 28px;
103 }
104
105 &-phone {}
106 }
107
108 &-btn {
109 @include btc(148px, 52px);
110 background-color: #cc9999;
111 border: solid 1px #333333;
112 border-radius: 48px;
113 color: #ffffff;
114 }
115 }
116
117
118 // 商品详情
119 .detail {
120 margin: 72px auto 0;
121 }
122
123 // 商品参数
124 .parameter {
125 margin: 72px auto 0;
126
127 &-table {
128 margin-top: 32px;
129
130 &-item {
131 display: flex;
132 border: solid 1px $fontGray;
133 border-bottom: none;
134 height: 48px;
135
136 div {
137 line-height: 48px;
138 @extend .bb;
139 padding: 0 12px;
140 }
141
142 .label {
143 width: 132px;
144 border-right: solid 1px $fontGray;
145 }
146
147 .val {
148 flex: 1;
149 }
150
151 &:last-child {
152 border-bottom: solid 1px $fontGray;
153 }
154 }
155 }
156 }
157
158 // 返回顶部
159 .top-btn {
160 margin: 72px auto 0;
161 @include btc(232px, 60px);
162 background-color: #1e9ad3;
163 color: #ffffff;
164 border-radius: 8px;
165 }
1
2 <template>
3 <div class="page cPageBottom page-product-detail">
4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div>
6 <div class="app__content main" id="scroll0">
7 <div class="top-space"></div>
8 <!-- 分页导航 -->
9 <div class="nav">
10 <van-sticky>
11 <van-tabs class="tabs" v-model="active" sticky @click="onNavHandler">
12 <van-tab title="商品"></van-tab>
13 <van-tab title="详情"></van-tab>
14 <van-tab title="参数"></van-tab>
15 </van-tabs>
16 </van-sticky>
17 </div>
18 <!-- banner -->
19 <div class="banner">
20 <van-swipe indicator-color="#ffcc00" class="swiper" :autoplay="3000">
21 <van-swipe-item v-for="(image, index) in images" :key="index">
22 <img class="img" v-lazy="image" />
23 </van-swipe-item>
24 </van-swipe>
25 </div>
26 <div class="content">
27 <!-- 功能导航 -->
28 <div class="func">
29 <div class="desc">
30 <div class="cTitle desc-title ">黄金吊坠 - 黄金饰品</div>
31 <div class="cFontGray desc-desc">商品关键词描述</div>
32 </div>
33 <div class="fav">
34 <div class="fav-icon">
35 <span class="iconfont iconfavoriteborder"></span>
36 </div>
37 <div class="cFontGray fav-btn">收藏</div>
38 </div>
39 </div>
40 <!-- 店铺信息 -->
41 <div class="shop">
42 <div class="shop-icon"></div>
43 <div class="shop-detail">
44 <div class="cTitle shop-detail-title">xxx珠宝首饰有限公司</div>
45 <div class="shop-detail-phone">15012341234</div>
46 </div>
47 <div @click="toShopDetail" class="shop-btn">进入店铺</div>
48 </div>
49 <!-- 商铺详情 -->
50 <div class="detail" id="scroll1">
51 <div class="cTitle detail-title">商品详情</div>
52 <div class="cFontGray detail-desc">暂无详情介绍</div>
53 </div>
54 <!-- 商品参数 -->
55 <div class="parameter" id="scroll2">
56 <div class="cTitle parameter-title">商品参数 </div>
57 <div class="cFontGray parameter-table">
58 <div class="parameter-table-item">
59 <div class="label">label1</div>
60 <div class="val">val1</div>
61 </div>
62 <div class="parameter-table-item">
63 <div class="label">label2</div>
64 <div class="val">val12</div>
65 </div>
66 <div class="parameter-table-item">
67 <div class="label">label3</div>
68 <div class="val">val13</div>
69 </div>
70 <div class="parameter-table-item">
71 <div class="label">label1</div>
72 <div class="val">val1</div>
73 </div>
74 <div class="parameter-table-item">
75 <div class="label">label2</div>
76 <div class="val">val12</div>
77 </div>
78 <div class="parameter-table-item">
79 <div class="label">label3</div>
80 <div class="val">val13</div>
81 </div>
82 </div>
83 </div>
84
85 </div>
86 <!-- 返回顶部 -->
87 <div class="top-btn" @click="toTop">返回顶部</div>
88 </div>
89 </div>
90 </template>
91
92 <script src="./product-detail.js"></script>
93 <style lang="scss" scoped>
94 @import "./product-detail.scss";
95 </style>
1 @import './../../styles/support';
1
2 <template>
3 <div class="page">
4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div>
6 <div class="app__content main">
7 <div class="top-space"></div>
8 <div class="content">
9 </div>
10 </div>
11 </div>
12 </template>
13
14 <script src="./index.js"></script>
15 <style lang="scss" scoped>
16 // @import './index.scss';
17 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -12,10 +12,15 @@ export default { ...@@ -12,10 +12,15 @@ export default {
12 }, 12 },
13 components: {}, 13 components: {},
14 methods: { 14 methods: {
15 onFavoriteHandler(){
16
17 },
18 onContactUsHandler(){
19
20 },
15 initData() {} 21 initData() {}
16 }, 22 },
17 mounted() {}, 23 mounted() {},
18 created() { 24 created() {
19 console.log("demo created");
20 } 25 }
21 }
...\ No newline at end of file ...\ No newline at end of file
26 }
......
1 @import './../../styles/support';
2
3
4 .page {}
5
6 .top {
7 width: $screenWidth;
8 // height: 300px;
9 background-color: wheat;
10 padding: 16px 0 46px;
11
12 background: url("https://huaban.com/go/?pin_id=506749488") center no-repeat;
13 @extend .bis;
14
15 .space1 {
16 // height: 16px;
17 }
18
19 .search {
20
21 margin: 0 auto;
22 width: 684px;
23 height: 64px;
24 display: flex;
25 justify-content: space-between;
26 background-color: white;
27 border-radius: 64px;
28
29 &-ipt {
30 flex: 1;
31 @extend .bb;
32 padding: 0 32px;
33 height: 64px;
34
35 input {
36 width: 100%;
37 height: 100%;
38 text-align: center;
39 }
40 }
41
42 &-icon {
43 width: 64px;
44 // height: 64px;
45 @extend .fcc;
46 // @extend .bb;
47 // padding: 0 16px;
48 padding-right: 16px;
49
50
51 .iconfont {
52 font-size: 40px;
53 }
54 }
55 }
56 }
57
58 .content {}
59
60
61
62 // 产品推荐
63 .product {
64 margin: 72px auto 0;
65 width: $contentWidth;
66
67 &-title {
68 text-align: center;
69 font-size: 32px;
70 color: #c78f8f;
71 }
72
73 &-list {
74 margin-top: 20px;
75 display: flex;
76 flex-wrap: wrap;
77 justify-content: space-between;
78
79 $itemWid: 330px;
80
81 .item {
82 width: $itemWid;
83 // height: 440px;
84 background: #F8F8F8;
85 border-radius: 4px;
86 margin-bottom: 32px;
87 padding-bottom: 12px;
88
89 .image {
90 width: $itemWid;
91 height: $itemWid;
92 }
93
94 .desc {
95 @extend .bb;
96 width: 325px;
97 padding: 4px 20px;
98 font-size: 24px;
99 // line-height: 32px;
100 color: #333333;
101 // @include ellipsis(3);
102 }
103 }
104 }
105 }
106
107
108 // 店铺信息
109 .shop {
110
111 width: $contentWidth;
112 margin: 54px auto 44px;
113 display: flex;
114 align-items: center;
115
116 &-icon {
117 width: 120px;
118 height: 120px;
119 border-radius: 120px;
120 border: solid 1px #333333;
121 }
122
123 &-detail {
124 color: #fdfdfd;
125 flex: 1;
126 @extend .bb;
127 height: 120px;
128 padding: 0 12px 0 24px;
129 flex-wrap: wrap;
130 display: flex;
131 align-content: space-between;
132 height: auto;
133
134 div {
135 width: 100%;
136 }
137
138 &-title {
139 font-size: 28px;
140 }
141
142 &-desc {
143 font-size: 18px;
144 }
145 }
146
147 &-btn-wrap {
148 .shop-btn {
149 @include btc(148px, 52px);
150 background-color: #cc9999;
151 border-radius: 52px;
152 color: #ffffff;
153 margin: 12px 0;
154 font-size: 24px;
155 }
156
157 .shop-btn2 {
158 background: transparent;
159 border: solid 1px #ffffff;
160 }
161 }
162
163
164 }
1
2 <template>
3 <div class="page cPageBottom page-shop-detail">
4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div>
6 <div class="app__content main">
7 <div class="top-space"></div>
8 <!-- 大标 -->
9 <div class="top">
10 <div class="space1"></div>
11 <div class="search">
12 <div class="search-ipt">
13 <input type="text" placeholder="搜索店铺内单品">
14 </div>
15 <div class="search-icon">
16 <span class="iconfont iconicon-test9"></span>
17 </div>
18 </div>
19 <div class="shop">
20 <div class="shop-icon"></div>
21 <div class="shop-detail">
22 <div class="shop-detail-title">xxx珠宝首饰有限公司</div>
23 <div class="shop-detail-desc">
24 <div class="t1">15012341234</div>
25 <div class="t1">广州市番禺区xx路宝汇珠宝交易中心888号</div>
26 <div class="t1">mail@baohui.com</div>
27 </div>
28 </div>
29 <div class="shop-btn-wrap">
30 <div @click="onFavoriteHandler" class="shop-btn">收藏店铺</div>
31 <div @click="onContactUsHandler" class="shop-btn shop-btn2">联系我们</div>
32 </div>
33
34 </div>
35 </div>
36 <div class="content">
37 <div class="product">
38 <div class="product-title">-- 全部商品 --</div>
39 <div class="product-list">
40 <div class="item">
41 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
42 <div class="desc">黄金吊坠</div>
43 </div>
44 <div class="item">
45 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
46 <div class="desc">黄金吊坠</div>
47 </div>
48 <div class="item">
49 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
50 <div class="desc">黄金吊坠</div>
51 </div>
52 <div class="item">
53 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
54 <div class="desc">黄金吊坠</div>
55 </div>
56 </div>
57 </div>
58 </div>
59 </div>
60 </div>
61 </template>
62
63 <script src="./shop-detail.js"></script>
64 <style lang="scss" scoped>
65 @import "./shop-detail.scss";
66 </style>
...@@ -13,6 +13,30 @@ const routes = [{ ...@@ -13,6 +13,30 @@ const routes = [{
13 } 13 }
14 }, 14 },
15 { 15 {
16 path: '/product/detail',
17 name: 'productDetail',
18 component: () => import('./pages/product-detail/product-detail.vue'),
19 meta: {
20 title: ''
21 }
22 },
23 {
24 path: '/shop/detail',
25 name: 'shopDetail',
26 component: () => import('./pages/shop-detail/shop-detail.vue'),
27 meta: {
28 title: ''
29 }
30 },
31 {
32 path: '/favorite',
33 name: 'favorite',
34 component: () => import('./pages/favorite/favorite.vue'),
35 meta: {
36 title: ''
37 }
38 },
39 {
16 path: '/demo', 40 path: '/demo',
17 name: 'demo', 41 name: 'demo',
18 component: () => import('./pages/demo/demo.vue'), 42 component: () => import('./pages/demo/demo.vue'),
...@@ -47,4 +71,4 @@ router.beforeEach((to, from, next) => { ...@@ -47,4 +71,4 @@ router.beforeEach((to, from, next) => {
47 next(); 71 next();
48 }); 72 });
49 73
50 export default router;
...\ No newline at end of file ...\ No newline at end of file
74 export default router;
......
...@@ -80,3 +80,33 @@ ...@@ -80,3 +80,33 @@
80 background-color: transparent; 80 background-color: transparent;
81 border: 0; 81 border: 0;
82 } 82 }
83
84 // 超过多少行自动省略 默认一行
85 @mixin ellipsis($line:1) {
86 display: -webkit-box;
87 word-break: break-all;
88 -webkit-box-orient: vertical;
89 -webkit-line-clamp: $line;
90 overflow: hidden;
91 text-overflow: ellipsis;
92 }
93
94 @mixin btc($width, $height) {
95 width: $width;
96 height: $height;
97 line-height: $height;
98 text-align: center;
99 }
100
101 // 通用按钮
102 @mixin cb($width:320px, $height:84px, $fontSize:32px) {
103 color: #FFFFFF;
104 position: relative;
105 width: $width;
106 height: $height;
107 line-height: $height;
108 text-align: center;
109 font-size: $fontSize;
110 border-radius: 8px;
111 background-color: #3680EB;
112 }
......
1 .bis { 1 .bis {
2 background-repeat: no-repeat; 2 background-repeat: no-repeat;
3 background-size: 100% 100%; 3 background-size: 100% 100%;
4 } 4 }
5 5
6 //flex 布局和 子元素 对其方式 6 //flex 布局和 子元素 对其方式
7 .fl { 7 .fl {
8 display: flex; 8 display: flex;
9 } 9 }
10 10
11 .fj { 11 .fj {
12 display: flex; 12 display: flex;
13 justify-content: space-between; 13 justify-content: space-between;
14 } 14 }
15 15
16 .fje { 16 .fje {
17 display: flex; 17 display: flex;
18 justify-content: flex-end; 18 justify-content: flex-end;
19 } 19 }
20 20
21 //水平和垂直居中 21 //水平和垂直居中
22 .fcc { 22 .fcc {
23 display: flex; 23 display: flex;
24 justify-content: center; 24 justify-content: center;
25 align-items: center; 25 align-items: center;
26 } 26 }
27 27
28 // 为元素设定的宽度和高度决定了元素的边框盒。 28 // 为元素设定的宽度和高度决定了元素的边框盒。
29 .bb { 29 .bb {
30 box-sizing: border-box; 30 box-sizing: border-box;
31 } 31 }
32 32
33 // 满屏 33 // 满屏
34 .fullp { 34 .fullp {
35 width: 100%; 35 width: 100%;
36 height: 100%; 36 height: 100%;
37 } 37 }
38 38
39 .shadow { 39 .shadow {
40 box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10); 40 box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10);
41 border-radius: 8px; 41 border-radius: 8px;
42 } 42 }
43 43
44 .linear { 44 .linear {
45 background-image: linear-gradient(to right, #1bade8, #3680EB);
46 }
...\ No newline at end of file ...\ No newline at end of file
45 background-image: linear-gradient(to right, #1bade8, #3680EB);
46 }
47
48 .cScreenWidth {
49 width: $screenWidth;
50 }
51
52 .cTitle {
53 font-size: $titleSize;
54 font-weight: bold;
55 }
56
57
58 .cFontGray {
59 color: $fontGray;
60 }
61
62 .cPageBottom {
63 padding-bottom: $pageBottom;
64 }
......
...@@ -40,5 +40,9 @@ $fontSizeSmaller: 24px; ...@@ -40,5 +40,9 @@ $fontSizeSmaller: 24px;
40 $fontSizeLarge: 36px; 40 $fontSizeLarge: 36px;
41 $fontSizeLarger: 44px; 41 $fontSizeLarger: 44px;
42 42
43 $pageBottom: 80px;
43 $contentWidth: 690px; //内容宽度 44 $contentWidth: 690px; //内容宽度
44 $screenWidth: 750px; // 屏幕宽度 45 $screenWidth: 750px; // 屏幕宽度
46
47 $titleSize:32px;
48 $fontGray:#b7b7b7;
......