3 |
24 |
25 |
26 |
58 |
59 |
79 |
--------------------------------------------------------------------------------
/src/common/fonts/icomoon.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/common/fonts/icomoon.eot
--------------------------------------------------------------------------------
/src/common/fonts/icomoon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/common/fonts/icomoon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/common/fonts/icomoon.ttf
--------------------------------------------------------------------------------
/src/common/fonts/icomoon.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/common/fonts/icomoon.woff
--------------------------------------------------------------------------------
/src/common/js/date.js:
--------------------------------------------------------------------------------
1 | export function formatDate(date, fmt) {
2 | if (/(y+)/.test(fmt)) {
3 | fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
4 | }
5 | let o = {
6 | 'M+': date.getMonth() + 1,
7 | 'd+': date.getDate(),
8 | 'h+': date.getHours(),
9 | 'm+': date.getMinutes(),
10 | 's+': date.getSeconds()
11 | };
12 | for (let k in o) {
13 | if (new RegExp(`(${k})`).test(fmt)) {
14 | let str = o[k] + '';
15 | fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));//如果传入的格式是1位，则返回原始值，否则补零。
16 | }
17 | }
18 | return fmt;
19 | };
20 |
21 | function padLeftZero(str) {
22 | return ('00' + str).substr(str.length);
23 | }
24 |
--------------------------------------------------------------------------------
/src/common/js/store.js:
--------------------------------------------------------------------------------
1 | /*
2 | * 存储数据
3 | * id为url参数，key是需要存储数据的键名，val为存储的值
4 | * */
5 | export function saveToLocal(id, key, value) {
6 | //定义商家数据为_seller_
7 | let seller = window.localStorage.__seller__;
8 | if (!seller) {
9 | seller = {};
10 | seller[id] = {};
11 | } else {
12 | seller = JSON.parse(seller);
13 | if (!seller[id]) {
14 | seller[id] = {};
15 | }
16 | }
17 | seller[id][key] = value;
18 | window.localStorage.__seller__ = JSON.stringify(seller);
19 | };
20 |
21 | /*
22 | * 读取localStorage数据
23 | * def为默认读取数据
24 | * */
25 | export function loadFromLocal(id, key, def) {
26 | let seller = window.localStorage.__seller__;
27 | if (!seller) {
28 | return def;
29 | }
30 | seller = JSON.parse(seller)[id];
31 | if (!seller) {
32 | return def;
33 | }
34 | let ret = seller[key];
35 | return ret || def;
36 | };
37 |
--------------------------------------------------------------------------------
/src/common/js/util.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 解析url参数
3 | * @example ?id=12345&a=b
4 | * @return Object {id:12345,a:b}
5 | */
6 | export function urlParse() {
7 | let url = window.location.search;
8 | let obj = {};
9 | let reg = /[?&][^?&]+=[^?&]+/g;
10 | let arr = url.match(reg);
11 | // ['?id=12345', '&a=b']
12 | if (arr) {
13 | arr.forEach((item) => {
14 | let tempArr = item.substring(1).split('=');
15 | let key = decodeURIComponent(tempArr[0]);
16 | let val = decodeURIComponent(tempArr[1]);
17 | obj[key] = val;
18 | });
19 | }
20 | return obj;
21 | };
22 |
--------------------------------------------------------------------------------
/src/common/stylus/base.styl:
--------------------------------------------------------------------------------
1 | body, html
2 | line-height: 1
3 | font-weight: 200
4 | font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif
5 |
6 | .clearfix
7 | display: inline-block
8 | &:after
9 | display: block
10 | content: "."
11 | height: 0
12 | line-height: 0
13 | clear: both
14 | visibility: hidden
15 |
16 | @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
17 | .border-1px
18 | &::after
19 | -webkit-transform: scaleY(0.7)
20 | transform: scaleY(0.7)
21 |
22 | @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
23 | .border-1px
24 | &::after
25 | -webkit-transform: scaleY(0.5)
26 | transform: scaleY(0.5)
27 |
--------------------------------------------------------------------------------
/src/common/stylus/icon.styl:
--------------------------------------------------------------------------------
1 | @font-face
2 | font-family: 'icomoon'
3 | src: url('../fonts/icomoon.eot?hrkgfy')
4 | src: url('../fonts/icomoon.eot?hrkgfy#iefix') format('embedded-opentype'),
5 | url('../fonts/icomoon.ttf?hrkgfy') format('truetype'),
6 | url('../fonts/icomoon.woff?hrkgfy') format('woff'),
7 | url('../fonts/icomoon.svg?hrkgfy#icomoon') format('svg')
8 | font-weight: normal
9 | font-style: normal
10 |
11 |
12 | [class^="icon-"], [class*=" icon-"]
13 | /* use !important to prevent issues with browser extensions that change fonts */
14 | font-family: 'icomoon' !important
15 | speak: none
16 | font-style: normal
17 | font-weight: normal
18 | font-variant: normal
19 | text-transform: none
20 | line-height: 1;
21 |
22 | /* Better Font Rendering =========== */
23 | -webkit-font-smoothing: antialiased
24 | -moz-osx-font-smoothing: grayscale
25 |
26 |
27 | .icon-add_circle:before
28 | content: "\e900";
29 |
30 | .icon-arrow_lift:before
31 | content: "\e901";
32 |
33 | .icon-check_circle:before
34 | content: "\e902";
35 |
36 | .icon-close:before
37 | content: "\e903";
38 |
39 | .icon-favorite:before
40 | content: "\e904";
41 |
42 | .icon-keyboard_arrow_right:before
43 | content: "\e905";
44 |
45 | .icon-remove_circle_outline:before
46 | content: "\e906";
47 |
48 | .icon-shopping_cart:before
49 | content: "\e907";
50 |
51 | .icon-thumb_down:before
52 | content: "\e908";
53 |
54 | .icon-thumb_up:before
55 | content: "\e909";
56 |
57 |
58 |
--------------------------------------------------------------------------------
/src/common/stylus/index.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'icomoon';
3 | src: url("../fonts/icomoon.eot?hrkgfy");
4 | src: url("../fonts/icomoon.eot?hrkgfy#iefix") format('embedded-opentype'), url("../fonts/icomoon.ttf?hrkgfy") format('truetype'), url("../fonts/icomoon.woff?hrkgfy") format('woff'), url("../fonts/icomoon.svg?hrkgfy#icomoon") format('svg');
5 | font-weight: normal;
6 | font-style: normal;
7 | }
8 | [class^="icon-"],
9 | [class*=" icon-"] {
10 | /* use !important to prevent issues with browser extensions that change fonts */
11 | font-family: 'icomoon' !important;
12 | speak: none;
13 | font-style: normal;
14 | font-weight: normal;
15 | font-variant: normal;
16 | text-transform: none;
17 | line-height: 1;
18 | /* Better Font Rendering =========== */
19 | -webkit-font-smoothing: antialiased;
20 | -moz-osx-font-smoothing: grayscale;
21 | }
22 | .icon-add_circle:before {
23 | content: "\e900";
24 | }
25 | .icon-arrow_lift:before {
26 | content: "\e901";
27 | }
28 | .icon-check_circle:before {
29 | content: "\e902";
30 | }
31 | .icon-close:before {
32 | content: "\e903";
33 | }
34 | .icon-favorite:before {
35 | content: "\e904";
36 | }
37 | .icon-keyboard_arrow_right:before {
38 | content: "\e905";
39 | }
40 | .icon-remove_circle_outline:before {
41 | content: "\e906";
42 | }
43 | .icon-shopping_cart:before {
44 | content: "\e907";
45 | }
46 | .icon-thumb_down:before {
47 | content: "\e908";
48 | }
49 | .icon-thumb_up:before {
50 | content: "\e909";
51 | }
52 | html,
53 | body {
54 | line-height: 1;
55 | font-weight: 200;
56 | font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif;
57 | }
58 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
59 | .border-1px::after {
60 | -webkit-transform: scaleY(0.7);
61 | transform: scaleY(0.7);
62 | }
63 | }
64 | @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
65 | .border-1px::after {
66 | -webkit-transform: scaleY(0.5);
67 | transform: scaleY(0.5);
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/common/stylus/index.styl:
--------------------------------------------------------------------------------
1 | @import './mixin'
2 | @import './icon'
3 | @import './base'
--------------------------------------------------------------------------------
/src/common/stylus/mixin.styl:
--------------------------------------------------------------------------------
1 | border-1px($color)
2 | position : relative
3 | &:after
4 | display: block
5 | position: absolute
6 | left: 0
7 | bottom: 0
8 | border-top 1px solid $color
9 | width: 100%
10 | content: ''
11 |
12 | border-none()
13 | &:after
14 | display: none
15 |
16 | bg-image($url)
17 | background-image url($url + "@2x.png")
18 | @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio)
19 | background-image url($url + "@3x.png")
20 |
--------------------------------------------------------------------------------
/src/components/cartcontrol/cartcontrol.styl:
--------------------------------------------------------------------------------
1 | .cartcontrol
2 | font-size: 0
3 | .cart-decrease
4 | display: inline-block
5 | padding: 6px
6 | .inner
7 | display: inline-block
8 | line-height: 24px
9 | font-size: 24px
10 | color: rgb(0, 160, 220)
11 | transition: all 0.4s linear
12 | &.v-enter-active, &.v-leave-active
13 | transition: all 0.4s linear
14 | &.v-enter, &.v-leave-active //刚进入和离开后的状态
15 | opacity: 0
16 | transform: translateX(24px)
17 | .inner1
18 | transform: rotate(180deg)
19 | .cart-count
20 | display: inline-block
21 | vertical-align: top
22 | width: 12px
23 | padding-top: 6px
24 | line-height: 24px
25 | text-align: center
26 | font-size: 10px
27 | color: rgb(147, 153, 159)
28 | .cart-add
29 | display: inline-block
30 | padding: 6px
31 | line-height: 24px
32 | font-size: 24px
33 | color: rgb(0, 160, 220)
34 |
--------------------------------------------------------------------------------
/src/components/cartcontrol/cartcontrol.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
18 |
6 |
7 |
8 |
9 | 商品
10 |
11 |
12 | 评论
13 |
14 |
15 | 商家
16 |
17 |
19 |
20 |
22 |
23 |
3 |
4 |
8 |
11 |
12 |
13 |
47 |
48 |
51 |
--------------------------------------------------------------------------------
/src/components/food/food.styl:
--------------------------------------------------------------------------------
1 | @import "../../common/stylus/mixin.styl"
2 |
3 | .food
4 | position: fixed
5 | left: 0
6 | top: 0
7 | bottom: 48px
8 | z-index: 30
9 | width: 100%
10 | background: #fff
11 | &.move-enter-active, &.move-leave-active
12 | transition: all 0.2s linear
13 | &.move-enter, &.move-leave-active
14 | transform: translate3d(100%, 0, 0)
15 | .image-header
16 | position: relative
17 | width: 100%
18 | height: 0
19 | padding-top: 100%
20 | img
21 | position: absolute
22 | top: 0
23 | left: 0
24 | width: 100%
25 | height: 100%
26 | .back
27 | position: absolute
28 | top: 10px
29 | left: 0
30 | .icon-arrow_lift
31 | display: block
32 | padding: 10px
33 | font-size: 20px
34 | color: #fff
35 |
36 | .content
37 | position: relative
38 | padding: 18px
39 | .title
40 | line-height: 14px
41 | margin-bottom: 8px
42 | font-size: 14px
43 | font-weight: 700
44 | color: rgb(7, 17, 27)
45 | .detail
46 | margin-bottom: 18px
47 | line-height: 10px
48 | height: 10px
49 | font-size: 0
50 | .sell-count, .rating
51 | font-size: 10px
52 | color: rgb(147, 153, 159)
53 | .sell-count
54 | margin-right: 12px
55 | .price
56 | font-weight: 700
57 | line-height: 24px
58 | .now
59 | margin-right: 8px
60 | font-size: 14px
61 | color: rgb(240, 20, 20)
62 | .old
63 | text-decoration: line-through
64 | font-size: 10px
65 | color: rgb(147, 153, 159)
66 | .cartcontrol-wrapper
67 | position: absolute
68 | right: 12px
69 | bottom: 12px
70 | .buy
71 | position: absolute
72 | right: 18px
73 | bottom: 18px
74 | z-index: 10
75 | height: 24px
76 | line-height: 24px
77 | padding: 0 12px
78 | box-sizing: border-box
79 | border-radius: 12px
80 | font-size: 10px
81 | color: #fff
82 | background: rgb(0, 160, 220)
83 | &.fade-enter-active, &.fade-leave-active
84 | transition: all 0.2s
85 | &.fade-enter, &.fade-leave-active
86 | opacity: 0
87 | .info
88 | padding: 18px
89 | .title
90 | line-height: 14px
91 | margin-bottom: 6px
92 | font-size: 14px
93 | color: rgb(7, 17, 27)
94 | .text
95 | line-height: 24px
96 | padding: 0 8px
97 | font-size: 12px
98 | color: rgb(77, 85, 93)
99 | .rating
100 | padding-top: 18px
101 | .title
102 | line-height: 14px
103 | margin-left: 18px
104 | font-size: 14px
105 | color: rgb(7, 17, 27)
106 | .rating-wrapper
107 | padding: 0 18px
108 | height: auto
109 | .rating-item
110 | position: relative
111 | padding: 16px 0
112 | border-1px(rgba(7, 17, 27, 0.1))
113 | .user
114 | position: absolute
115 | right: 0
116 | top: 16px
117 | line-height: 12px
118 | font-size: 0
119 | .name
120 | display: inline-block
121 | margin-right: 6px
122 | vertical-align: top
123 | font-size: 10px
124 | color: rgb(147, 153, 159)
125 | .avatar
126 | border-radius: 50%
127 | .time
128 | margin-bottom: 6px
129 | line-height: 12px
130 | font-size: 10px
131 | color: rgb(147, 153, 159)
132 | .text
133 | line-height: 16px
134 | font-size: 12px
135 | color: rgb(7, 17, 27)
136 | .icon-thumb_up, .icon-thumb_down
137 | margin-right: 4px
138 | line-height: 16px
139 | font-size: 12px
140 | .icon-thumb_up
141 | color: rgb(0, 160, 220)
142 | .icon-thumb_down
143 | color: rgb(147, 153, 159)
144 |
145 | .no-rating
146 | padding: 16px 0
147 | font-size: 12px
148 | color: rgb(147, 153, 159)
149 |
--------------------------------------------------------------------------------
/src/components/food/food.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 | {{food.count}}
9 |
10 |
4 |
60 |
5 |
59 |
6 | ![]()
7 |
11 |
8 |
9 |
10 |
12 |
25 |
29 |
30 | {{food.name}}
13 |
14 | 月售{{food.sellCount}}份
15 |
16 |
17 |
18 | ￥{{food.price}}￥{{food.oldPrice}}
19 |
20 |
21 |
23 |
24 |
26 | 加入购物车
27 |
28 |
32 |
35 | 商品信息
33 |{{food.info}}
34 |
37 |
58 | 商品评价
38 |
41 |
57 | -
42 |
-
44 | 45 | {{rating.username}} 46 |48 |
47 |
{{rating.rateTime | formatDate}}49 |50 | 51 | {{rating.text}} 52 |
53 |
54 |
3 |
49 |
50 |
51 |
174 |
175 |
178 |
--------------------------------------------------------------------------------
/src/components/goods/guarantee_3@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/goods/guarantee_3@2x.png
--------------------------------------------------------------------------------
/src/components/goods/guarantee_3@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/goods/guarantee_3@3x.png
--------------------------------------------------------------------------------
/src/components/goods/invoice_3@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/goods/invoice_3@2x.png
--------------------------------------------------------------------------------
/src/components/goods/invoice_3@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/goods/invoice_3@3x.png
--------------------------------------------------------------------------------
/src/components/goods/special_3@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/goods/special_3@2x.png
--------------------------------------------------------------------------------
/src/components/goods/special_3@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/goods/special_3@3x.png
--------------------------------------------------------------------------------
/src/components/header/brand@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/brand@2x.png
--------------------------------------------------------------------------------
/src/components/header/brand@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/brand@3x.png
--------------------------------------------------------------------------------
/src/components/header/bulletin@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/bulletin@2x.png
--------------------------------------------------------------------------------
/src/components/header/bulletin@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/bulletin@3x.png
--------------------------------------------------------------------------------
/src/components/header/decrease_1@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/decrease_1@2x.png
--------------------------------------------------------------------------------
/src/components/header/decrease_1@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/decrease_1@3x.png
--------------------------------------------------------------------------------
/src/components/header/decrease_2@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/decrease_2@2x.png
--------------------------------------------------------------------------------
/src/components/header/decrease_2@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/decrease_2@3x.png
--------------------------------------------------------------------------------
/src/components/header/discount_1@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/discount_1@2x.png
--------------------------------------------------------------------------------
/src/components/header/discount_1@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/discount_1@3x.png
--------------------------------------------------------------------------------
/src/components/header/discount_2@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/discount_2@2x.png
--------------------------------------------------------------------------------
/src/components/header/discount_2@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/discount_2@3x.png
--------------------------------------------------------------------------------
/src/components/header/guarantee_1@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/guarantee_1@2x.png
--------------------------------------------------------------------------------
/src/components/header/guarantee_1@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/guarantee_1@3x.png
--------------------------------------------------------------------------------
/src/components/header/guarantee_2@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/guarantee_2@2x.png
--------------------------------------------------------------------------------
/src/components/header/guarantee_2@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/guarantee_2@3x.png
--------------------------------------------------------------------------------
/src/components/header/header.styl:
--------------------------------------------------------------------------------
1 | @import "../../common/stylus/mixin.styl";
2 |
3 | .header
4 | position: relative
5 | background: rgba(7,17,27,0.5)
6 | color: #fff
7 | .content-wrapper
8 | position: relative
9 | padding: 24px 12px 18px 24px
10 | font-size: 0
11 | .avatar
12 | display: inline-block
13 | vertical-align: top
14 | img
15 | border-radius: 2px
16 | .content
17 | display: inline-block
18 | margin-left: 16px
19 | .title
20 | padding: 2px 0 8px 0
21 | .brand
22 | display: inline-block
23 | width: 30px
24 | height: 18px
25 | vertical-align: top
26 | bg-image('brand')
27 | background-size: 30px 18px
28 | background-repeat: no-repeat
29 | .name
30 | margin-left: 6px
31 | font-size: 16px
32 | line-height: 18px
33 | font-weight: bold
34 | .description
35 | margin-bottom: 10px
36 | line-height: 12px
37 | font-size: 12px
38 | .support
39 | .icon
40 | display: inline-block
41 | width: 12px
42 | height: 12px
43 | margin-right: 4px
44 | vertical-align: top
45 | background-size: 12px 12px
46 | background-repeat: no-repeat
47 | &.decrease
48 | bg-image('decrease_1')
49 | &.discount
50 | bg-image('discount_1')
51 | &.guarantee
52 | bg-image('guarantee_1')
53 | &.invoice
54 | bg-image('invoice_1')
55 | &.special
56 | bg-image('special_1')
57 | .text
58 | line-height: 12px
59 | font-size: 10px
60 | .support-count
61 | position: absolute
62 | right: 12px
63 | bottom: 14px
64 | padding: 0 8px
65 | height: 24px
66 | line-height: 24px
67 | border-radius: 14px
68 | background: rgba(0,0,0,0.2)
69 | text-align: center
70 | .count
71 | vertical-align: top
72 | font-size: 10px
73 | .icon-keyboard_arrow_right
74 | margin-left: 2px
75 | line-height: 24px
76 | font-size: 10px
77 | .bulletin-wrapper
78 | position: relative
79 | height: 28px
80 | line-height: 28px
81 | padding: 0 22px 0 12px
82 | white-space: nowrap
83 | overflow: hidden
84 | text-overflow: ellipsis
85 | background: rgba(7,17,27,0.2)
86 | .bulletin-title
87 | display: inline-block
88 | vertical-align: top
89 | margin-top: 8px
90 | width: 22px
91 | height: 12px
92 | bg-image('bulletin')//pic.027cgb.cn/20170311/2017336411290357780.png
93 | background-size: 22px 12px
94 | background-repeat: no-repeat
95 | .bulletin-text
96 | margin: 0 4px
97 | font-size: 10px
98 | .icon-keyboard_arrow_right
99 | position: absolute
100 | right: 12px
101 | font-size: 10px
102 | top: 9px
103 | .background
104 | position: absolute
105 | top: 0
106 | left:0
107 | width: 100%
108 | height: 100%
109 | overflow: hidden
110 | z-index: -1
111 | filter: blur(5px)
112 | img
113 | margin-top: -110px
114 | .detail
115 | position: fixed
116 | top: 0
117 | left: 0
118 | z-index: 100
119 | width: 100%
120 | height: 100%
121 | overflow: auto
122 | background-color: rgba(7,17,27,0.8)
123 | backdrop-filter: blur(10px)
124 | .fade-enter-active, .fade-leave-active
125 | transition: opacity 0.5s
126 | .fade-enter, .fade-leave-to
127 | opacity: 0
128 | .detail-wrapper
129 | width: 100%
130 | min-height: 100%
131 | .detail-main
132 | margin-top: 64px
133 | padding-bottom: 64px
134 | .name
135 | line-height: 16px
136 | text-align: center
137 | font-size: 16px
138 | font-weight: 700
139 | .star-wrapper
140 | margin-top: 18px
141 | padding: 2px 0
142 | text-align: center
143 | .title
144 | display: flex
145 | width: 80%
146 | margin: 28px auto 24px auto
147 | .line
148 | flex: 1
149 | position: relative
150 | top: -6px
151 | border-bottom: 1px solid rgba(255,255,255,0.2)
152 | .text
153 | padding: 0 12px
154 | font-size: 14px
155 | font-weight: 700
156 | .supports
157 | width: 80%
158 | margin: 0 auto
159 | .support-item
160 | padding: 0 12px
161 | margin-bottom: 12px
162 | font-size: 0
163 | &:last-child
164 | margin-bottom: 0
165 | .icon
166 | display: inline-block
167 | width: 16px
168 | height: 16px
169 | vertical-align: top
170 | margin-right: 6px
171 | background-size: 16px 16px
172 | background-repeat: no-repeat
173 | &.decrease
174 | bg-image('decrease_2')
175 | &.discount
176 | bg-image('discount_2')
177 | &.guarantee
178 | bg-image('guarantee_2')
179 | &.invoice
180 | bg-image('invoice_2')
181 | &.special
182 | bg-image('special_2')
183 | .text
184 | line-height: 16px
185 | font-size: 12px
186 |
187 |
188 |
189 | .bulletin
190 | width: 80%
191 | margin: 0 auto
192 | .content
193 | padding: 0 12px
194 | line-height: 24px
195 | font-size: 12px
196 | text-align: justify
197 | .detail-close
198 | position: relative
199 | width: 32px
200 | height: 32px
201 | margin: -64px auto 0 auto
202 | clear: both
203 | font-size: 32px
204 |
--------------------------------------------------------------------------------
/src/components/header/header.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
14 |
47 |
15 |
43 |
44 | -
16 |
-
17 |
{{item.name}}
18 |-
19 |
-
20 | 21 |23 |
22 |
24 |38 |{{food.name}}
25 |{{food.description}}
26 |27 | 月售{{food.sellCount}}好评率:{{food.rating}}% 28 |29 |30 | ￥{{food.price}} 31 | ￥{{food.oldPrice}} 32 | 33 |34 |35 |37 |36 |
39 |
41 | -
20 |
3 |
65 |
66 |
67 |
97 |
98 |
101 |
--------------------------------------------------------------------------------
/src/components/header/invoice_1@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/invoice_1@2x.png
--------------------------------------------------------------------------------
/src/components/header/invoice_1@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/invoice_1@3x.png
--------------------------------------------------------------------------------
/src/components/header/invoice_2@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/invoice_2@2x.png
--------------------------------------------------------------------------------
/src/components/header/invoice_2@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/invoice_2@3x.png
--------------------------------------------------------------------------------
/src/components/header/special_1@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/special_1@2x.png
--------------------------------------------------------------------------------
/src/components/header/special_1@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/special_1@3x.png
--------------------------------------------------------------------------------
/src/components/header/special_2@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/special_2@2x.png
--------------------------------------------------------------------------------
/src/components/header/special_2@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/header/special_2@3x.png
--------------------------------------------------------------------------------
/src/components/ratings/ratings.styl:
--------------------------------------------------------------------------------
1 | @import "../../common/stylus/mixin.styl"
2 |
3 | .ratings
4 | position: absolute
5 | top: 174px
6 | bottom: 0
7 | left: 0
8 | width: 100%
9 | overflow: hidden
10 | .overview
11 | display: flex
12 | padding: 18px 0
13 | .overview-left
14 | flex: 0 0 137px
15 | padding: 6px 0
16 | width: 137px
17 | border-right: 1px solid rgba(7, 17, 27, 0.1)
18 | text-align: center
19 | @media only screen and (max-width: 320px)
20 | flex: 0 0 120px
21 | width: 120px
22 | .score
23 | margin-bottom: 6px
24 | line-height: 28px
25 | font-size: 24px
26 | color: rgb(255, 153, 0)
27 | .title
28 | margin-bottom: 8px
29 | line-height: 12px
30 | font-size: 12px
31 | color: rgb(7, 17, 27)
32 | .rank
33 | line-height: 10px
34 | font-size: 10px
35 | color: rgb(147, 153, 159)
36 | .overview-right
37 | flex: 1
38 | padding: 6px 0 6px 24px
39 | @media only screen and (max-width: 320px)
40 | padding-left: 6px
41 | .score-wrapper
42 | margin-bottom: 8px
43 | font-size: 0
44 | .title
45 | display: inline-block
46 | line-height: 18px
47 | vertical-align: top
48 | font-size: 12px
49 | color: rgb(7, 17, 27)
50 | .star
51 | display: inline-block
52 | margin: 0 12px
53 | vertical-align: top
54 | .score
55 | display: inline-block
56 | line-height: 18px
57 | vertical-align: top
58 | font-size: 12px
59 | color: rgb(255, 153, 0)
60 | .delivery-wrapper
61 | font-size: 0
62 | .title
63 | line-height: 18px
64 | font-size: 12px
65 | color: rgb(7, 17, 27)
66 | .delivery
67 | margin-left: 12px
68 | font-size: 12px
69 | color: rgb(147, 153, 159)
70 | .rating-wrapper
71 | padding: 0 18px
72 | .rating-item
73 | display: flex
74 | padding: 18px 0
75 | border-1px(rgba(7, 17, 27, 0.1))
76 | .avatar
77 | flex: 0 0 28px
78 | width: 28px
79 | margin-right: 12px
80 | img
81 | border-radius: 50%
82 | .content
83 | position: relative
84 | flex: 1
85 | .name
86 | margin-bottom: 4px
87 | line-height: 12px
88 | font-size: 10px
89 | color: rgb(7, 17, 27)
90 | .star-wrapper
91 | margin-bottom: 6px
92 | font-size: 0
93 | .star
94 | display: inline-block
95 | margin-right: 6px
96 | vertical-align: top
97 | .delivery
98 | display: inline-block
99 | vertical-align: top
100 | line-height: 12px
101 | font-size: 10px
102 | color: rgb(147, 153, 159)
103 | .text
104 | margin-bottom: 8px
105 | line-height: 18px
106 | color: rgb(7, 17, 27)
107 | font-size: 12px
108 | .recommend
109 | line-height: 16px
110 | font-size: 0
111 | .icon-thumb_up, .item
112 | display: inline-block
113 | margin: 0 8px 4px 0
114 | font-size: 9px
115 | .icon-thumb_up
116 | color: rgb(0, 160, 220)
117 | .item
118 | padding: 0 6px
119 | border: 1px solid rgba(7, 17, 27, 0.1)
120 | border-radius: 1px
121 | color: rgb(147, 153, 159)
122 | background: #fff
123 | .time
124 | position: absolute
125 | top: 0
126 | right: 0
127 | line-height: 12px
128 | font-size: 10px
129 | color: rgb(147, 153, 159)
130 |
--------------------------------------------------------------------------------
/src/components/ratings/ratings.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
25 |
5 | ![]()
6 |
7 |
8 |
20 |
9 |
10 | {{seller.name}}
11 |
12 |
13 | {{seller.description}}/{{seller.deliveryTime}}分钟送达
14 |
15 |
16 |
17 | {{seller.supports[0].description}}
18 |
19 |
21 | {{seller.supports.length}}个
22 |
23 |
24 |
26 | {{seller.bulletin}}
27 |
28 |
29 |
30 | ![]()
31 |
32 |
33 |
64 |
34 |
60 |
35 |
59 | {{seller.name}}
36 |
37 |
39 |
40 |
41 |
44 | 优惠信息
42 |
43 | -
45 |
- 46 | 47 | {{seller.supports[index].description}} 48 | 49 |
51 |
52 |
55 | 商家公告
53 |
54 |
56 |
58 | {{seller.bulletin}}
57 |
61 |
62 |
63 |
3 |
56 |
57 |
58 |
131 |
132 |
135 |
--------------------------------------------------------------------------------
/src/components/ratingselect/ratingselect.styl:
--------------------------------------------------------------------------------
1 | @import "../../common/stylus/mixin.styl"
2 |
3 | .ratingselect
4 | .rating-type
5 | padding: 18px 0
6 | margin: 0 18px
7 | border-1px(rgba(7, 17, 27, 0.1))
8 | font-size: 0
9 | .block
10 | display: inline-block
11 | padding: 8px 12px
12 | margin-right: 8px
13 | line-height: 16px
14 | border-radius: 1px
15 | font-size: 12px
16 | color: rgb(77, 85, 93)
17 | &.active
18 | color: #fff
19 | .count
20 | margin-left: 2px
21 | font-size: 8px
22 | &.positive
23 | background: rgba(0, 160, 220, 0.2)
24 | &.active
25 | background: rgb(0, 160, 220)
26 | &.negative
27 | background: rgba(77, 85, 93, 0.2)
28 | &.active
29 | background: rgb(77, 85, 93)
30 | .switch
31 | padding: 12px 18px
32 | line-height: 24px
33 | border-bottom: 1px solid rgba(7, 17, 27, 0.1)
34 | color: rgb(147, 153, 159)
35 | font-size: 0
36 | &.on
37 | .icon-check_circle
38 | color: #00c850
39 | .icon-check_circle
40 | display: inline-block
41 | vertical-align: top
42 | margin-right: 4px
43 | font-size: 24px
44 | .text
45 | display: inline-block
46 | vertical-align: top
47 | font-size: 12px
48 |
--------------------------------------------------------------------------------
/src/components/ratingselect/ratingselect.vue:
--------------------------------------------------------------------------------
1 |
2 |
16 |
17 |
18 |
78 |
79 |
82 |
--------------------------------------------------------------------------------
/src/components/seller/decrease_4@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/seller/decrease_4@2x.png
--------------------------------------------------------------------------------
/src/components/seller/decrease_4@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/seller/decrease_4@3x.png
--------------------------------------------------------------------------------
/src/components/seller/discount_4@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/seller/discount_4@2x.png
--------------------------------------------------------------------------------
/src/components/seller/discount_4@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/seller/discount_4@3x.png
--------------------------------------------------------------------------------
/src/components/seller/guarantee_4@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/seller/guarantee_4@2x.png
--------------------------------------------------------------------------------
/src/components/seller/guarantee_4@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/seller/guarantee_4@3x.png
--------------------------------------------------------------------------------
/src/components/seller/invoice_4@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/seller/invoice_4@2x.png
--------------------------------------------------------------------------------
/src/components/seller/invoice_4@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/seller/invoice_4@3x.png
--------------------------------------------------------------------------------
/src/components/seller/seller.styl:
--------------------------------------------------------------------------------
1 | @import "../../common/stylus/mixin.styl"
2 |
3 | .seller
4 | position: absolute
5 | top: 174px
6 | bottom: 0
7 | left: 0
8 | width: 100%
9 | overflow: hidden
10 | .overview
11 | position: relative
12 | padding: 18px
13 | .title
14 | margin-bottom: 8px
15 | line-height: 14px
16 | color: rgb(7, 17, 27)
17 | font-size: 14px
18 | .desc
19 | padding-bottom: 18px
20 | border-1px(rgba(7, 17, 27, 0.1))
21 | font-size: 0
22 | .star
23 | display: inline-block
24 | margin-right: 8px
25 | vertical-align: top
26 | .text
27 | display: inline-block
28 | margin-right: 12px
29 | line-height: 18px
30 | vertical-align: top
31 | font-size: 10px
32 | color: rgb(77, 85, 93)
33 | .remark
34 | display: flex
35 | padding-top: 18px
36 | .block
37 | flex: 1
38 | text-align: center
39 | border-right: 1px solid rgba(7, 17, 27, 0.1)
40 | &:last-child
41 | border: none
42 | h2
43 | margin-bottom: 4px
44 | line-height: 10px
45 | font-size: 10px
46 | color: rgb(147, 153, 159)
47 | .content
48 | line-height: 24px
49 | font-size: 10px
50 | color: rgb(7, 17, 27)
51 | .stress
52 | font-size: 24px
53 | .favorite
54 | position: absolute
55 | width: 50px
56 | right: 11px
57 | top: 18px
58 | text-align: center
59 | .icon-favorite
60 | display: block
61 | margin-bottom: 4px
62 | line-height: 24px
63 | font-size: 24px
64 | color: #d4d6d9
65 | &.active
66 | color: rgb(240, 20, 20)
67 | .text
68 | line-height: 10px
69 | font-size: 10px
70 | color: rgb(77, 85, 93)
71 | .bulletin
72 | padding: 18px 18px 0 18px
73 | .title
74 | margin-bottom: 8px
75 | line-height: 14px
76 | color: rgb(7, 17, 27)
77 | font-size: 14px
78 | .content-wrapper
79 | padding: 0 12px 16px 12px
80 | border-1px(rgba(7, 17, 27, 0.1))
81 | .content
82 | line-height: 24px
83 | font-size: 12px
84 | color: rgb(240, 20, 20)
85 | .supports
86 | .support-item
87 | padding: 16px 12px
88 | border-1px(rgba(7, 17, 27, 0.1))
89 | font-size: 0
90 | &:last-child
91 | border-none()
92 | .icon
93 | display: inline-block
94 | width: 16px
95 | height: 16px
96 | vertical-align: top
97 | margin-right: 6px
98 | background-size: 16px 16px
99 | background-repeat: no-repeat
100 | &.decrease
101 | bg-image('decrease_4')
102 | &.discount
103 | bg-image('discount_4')
104 | &.guarantee
105 | bg-image('guarantee_4')
106 | &.invoice
107 | bg-image('invoice_4')
108 | &.special
109 | bg-image('special_4')
110 | .text
111 | line-height: 16px
112 | font-size: 12px
113 | color: rgb(7, 17, 27)
114 | .pics
115 | padding: 18px
116 | .title
117 | margin-bottom: 12px
118 | line-height: 14px
119 | color: rgb(7, 17, 27)
120 | font-size: 14px
121 | .pic-wrapper
122 | width: 100%
123 | overflow: hidden
124 | white-space: nowrap
125 | .pic-list
126 | font-size: 0
127 | .pic-item
128 | display: inline-block
129 | margin-right: 6px
130 | width: 120px
131 | height: 90px
132 | &:last-child
133 | margin: 0
134 | .info
135 | padding: 18px 18px 0 18px
136 | color: rgb(7, 17, 27)
137 | .title
138 | padding-bottom: 12px
139 | line-height: 14px
140 | border-1px(rgba(7, 17, 27, 0.1))
141 | font-size: 14px
142 | .info-item
143 | padding: 16px 12px
144 | line-height: 16px
145 | border-1px(rgba(7, 17, 27, 0.1))
146 | font-size: 12px
147 | &:last-child
148 | border-none()
149 |
--------------------------------------------------------------------------------
/src/components/seller/seller.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
55 |
5 |
27 |
6 |
10 | {{seller.score}}
7 |综合评分
8 | 高于周边商家{{seller.rankRate}}%
9 |
11 |
26 |
12 | 服务态度
13 |
16 |
17 | 商品评分
18 |
21 |
22 | 送达时间
23 | {{seller.deliveryTime}}分钟
24 |
25 |
31 |
54 | -
32 |
-
33 | 34 |36 |
35 |
37 |51 |{{rating.username}}
38 |39 |42 |40 | {{rating.deliveryTime}} 41 | {{rating.text}}
43 |44 | 45 | {{item}} 46 |47 |48 | {{rating.rateTime | formatDate}} 49 |50 |
52 |
3 |
69 |
70 |
71 |
158 |
159 |
162 |
--------------------------------------------------------------------------------
/src/components/seller/special_4@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/seller/special_4@2x.png
--------------------------------------------------------------------------------
/src/components/seller/special_4@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/seller/special_4@3x.png
--------------------------------------------------------------------------------
/src/components/shopcart/shopcart.styl:
--------------------------------------------------------------------------------
1 | @import "../../common/stylus/mixin.styl"
2 |
3 | .shopcart
4 | position: fixed
5 | left: 0
6 | bottom: 0
7 | z-index: 50
8 | width: 100%
9 | height: 48px
10 | .content
11 | display: flex
12 | background: #141d27
13 | font-size: 0
14 | color: rgba(255, 255, 255, 0.4)
15 | .content-left
16 | flex: 1
17 | .logo-wrapper
18 | display: inline-block
19 | vertical-align: top
20 | position: relative
21 | top: -10px
22 | margin: 0 12px
23 | padding: 6px
24 | width: 56px
25 | height: 56px
26 | box-sizing: border-box
27 | border-radius: 50%
28 | background: #141d27
29 | .logo
30 | width: 100%
31 | height: 100%
32 | border-radius: 50%
33 | text-align: center
34 | background: #2b343c
35 | &.highlight
36 | background: rgb(0, 160, 220)
37 | .icon-shopping_cart
38 | line-height: 44px
39 | font-size: 24px
40 | color: #80858a
41 | &.highlight
42 | color: #fff
43 | .num
44 | position: absolute
45 | top: 0
46 | right: 0
47 | width: 24px
48 | height: 16px
49 | line-height: 16px
50 | text-align: center
51 | border-radius: 16px
52 | font-size: 9px
53 | font-weight: 700
54 | color: #fff
55 | background: rgb(240, 20, 20)
56 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4)
57 | .price
58 | display: inline-block
59 | vertical-align: top
60 | margin-top: 12px
61 | line-height: 24px
62 | padding-right: 12px
63 | box-sizing: border-box
64 | border-right: 1px solid rgba(255, 255, 255, 0.1)
65 | font-size: 16px
66 | font-weight: 700
67 | &.highlight
68 | color: #fff
69 | .desc
70 | display: inline-block
71 | vertical-align: top
72 | margin: 12px 0 0 12px
73 | line-height: 24px
74 | font-size: 10px
75 | .content-right
76 | flex: 0 0 105px
77 | width: 105px
78 | .pay
79 | height: 48px
80 | line-height: 48px
81 | text-align: center
82 | font-size: 12px
83 | font-weight: 700
84 | &.not-enough
85 | background: #2b333b
86 | &.enough
87 | background: #00b43c
88 | color: #fff
89 | .ball-container
90 | .ball
91 | position: fixed
92 | left: 32px
93 | bottom: 22px
94 | z-index: 200
95 | &.drop-enter-active, &.drop-leave-active
96 | transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
97 | .inner
98 | width: 16px
99 | height: 16px
100 | border-radius: 50%
101 | background: rgb(0, 160, 220)
102 | transition: all 0.4s linear
103 | .shopcart-list
104 | position: absolute
105 | left: 0
106 | top: 0
107 | z-index: -1
108 | width: 100%
109 | transform: translate3d(0, -100%, 0)
110 | &.fold-enter-active, &.fold-leave-active
111 | transition: all 0.5s
112 | &.fold-enter, &.fold-leave-active
113 | transform: translate3d(0, 0, 0)
114 | .list-header
115 | height: 40px
116 | line-height: 40px
117 | padding: 0 18px
118 | background: #f3f5f7
119 | border-bottom: 1px solid rgba(7, 17, 27, 0.1)
120 | .title
121 | float: left
122 | font-size: 14px
123 | color: rgb(7, 17, 27)
124 | .empty
125 | float: right
126 | font-size: 12px
127 | color: rgb(0, 160, 220)
128 |
129 | .list-content
130 | padding: 0 18px
131 | max-height: 217px
132 | overflow: hidden
133 | background: #fff
134 | .food
135 | position: relative
136 | padding: 12px 0
137 | box-sizing: border-box
138 | border-1px(rgba(7, 17, 27, 0.1))
139 | .name
140 | line-height: 24px
141 | font-size: 14px
142 | color: rgb(7, 17, 27)
143 | .price
144 | position: absolute
145 | right: 90px
146 | bottom: 12px
147 | line-height: 24px
148 | font-size: 14px
149 | font-weight: 700
150 | color: rgb(240, 20, 20)
151 | .cartcontrol-wrapper
152 | position: absolute
153 | right: 0
154 | bottom: 6px
155 |
156 | .list-mask
157 | position: fixed
158 | top: 0
159 | left: 0
160 | width: 100%
161 | height: 100%
162 | z-index: 40
163 | backdrop-filter: blur(10px)
164 | background: rgba(7, 17, 27, 0.6)
165 | &.fade-enter-active, &.fade-leave-active
166 | transition: all 0.5s
167 | &.fade-enter, &.fade-leave-active
168 | opacity: 0
169 | background: rgba(7, 17, 27, 0)
170 |
--------------------------------------------------------------------------------
/src/components/shopcart/shopcart.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
68 |
5 |
36 | {{seller.name}}
6 |
7 |
11 | -
12 |
-
13 |
起送价
14 |15 | {{seller.minPrice}}元 16 |17 |
18 | -
19 |
商家配送
20 |21 | {{seller.deliveryPrice}}元 22 |23 |
24 | -
25 |
平均配送时间
26 |27 | {{seller.deliveryTime}}分钟 28 |29 |
30 |
32 |
33 | {{favoriteText}}
34 |
35 |
38 |
49 | 公告与活动
39 |
40 |
42 | {{seller.bulletin}}
41 |-
43 |
- 44 | 45 | {{seller.supports[index].description}} 46 | 47 |
51 |
60 | 商家实景
52 |
53 |
59 | -
54 |
-
55 |
56 |
57 |
62 |
67 | 商家信息
63 |-
64 |
- {{info}} 65 |
3 |
55 |
56 |
57 |
58 |
59 |
60 |
234 |
235 |
238 |
--------------------------------------------------------------------------------
/src/components/split/split.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
9 |
17 |
--------------------------------------------------------------------------------
/src/components/star/star.styl:
--------------------------------------------------------------------------------
1 | @import '../../common/stylus/mixin.styl';
2 |
3 | .star
4 | font-size: 0
5 | .star-item
6 | display: inline-block
7 | background-repeat: no-repeat
8 | &.star-48
9 | .star-item
10 | width: 20px
11 | height: 20px
12 | margin-right: 22px
13 | background-size: 20px 20px
14 | &:last-child
15 | margin-right: 0
16 | &.on
17 | bg-image('star48_on')
18 | &.half
19 | bg-image('star48_half')
20 | &.off
21 | bg-image('star48_off')
22 | &.star-36
23 | .star-item
24 | width: 15px
25 | height: 15px
26 | margin-right: 6px
27 | background-size: 15px 15px
28 | &:last-child
29 | margin-right: 0
30 | &.on
31 | bg-image('star36_on')
32 | &.half
33 | bg-image('star36_half')
34 | &.off
35 | bg-image('star36_off')
36 | &.star-24
37 | .star-item
38 | width: 10px
39 | height: 10px
40 | margin-right: 3px
41 | background-size: 10px 10px
42 | &:last-child
43 | margin-right: 0
44 | &.on
45 | bg-image('star24_on')
46 | &.half
47 | bg-image('star24_half')
48 | &.off
49 | bg-image('star24_off')
50 |
51 |
--------------------------------------------------------------------------------
/src/components/star/star.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
32 |
52 |
53 |
54 |
5 |
21 |
6 |
15 |
7 |
12 |
8 |
9 |
10 | {{totalCount}}
11 | ￥{{totalPrice}}
13 | 另需配送费￥{{deliveryPrice}}元
14 |
16 |
20 |
17 | {{payDesc}}
18 |
19 |
22 |
26 |
30 |
31 |
27 |
28 |
29 |
33 |
51 |
34 |
37 | 购物车
35 | 清空 36 |
38 |
50 | -
39 |
-
40 | {{food.name}}
41 | 42 | ￥{{food.price * food.count}} 43 |44 |45 |47 |
46 |
48 |
3 |
4 |
5 |
6 |
7 |
46 |
47 |
50 |
--------------------------------------------------------------------------------
/src/components/star/star24_half@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star24_half@2x.png
--------------------------------------------------------------------------------
/src/components/star/star24_half@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star24_half@3x.png
--------------------------------------------------------------------------------
/src/components/star/star24_off@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star24_off@2x.png
--------------------------------------------------------------------------------
/src/components/star/star24_off@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star24_off@3x.png
--------------------------------------------------------------------------------
/src/components/star/star24_on@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star24_on@2x.png
--------------------------------------------------------------------------------
/src/components/star/star24_on@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star24_on@3x.png
--------------------------------------------------------------------------------
/src/components/star/star36_half@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star36_half@2x.png
--------------------------------------------------------------------------------
/src/components/star/star36_half@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star36_half@3x.png
--------------------------------------------------------------------------------
/src/components/star/star36_off@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star36_off@2x.png
--------------------------------------------------------------------------------
/src/components/star/star36_off@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star36_off@3x.png
--------------------------------------------------------------------------------
/src/components/star/star36_on@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star36_on@2x.png
--------------------------------------------------------------------------------
/src/components/star/star36_on@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star36_on@3x.png
--------------------------------------------------------------------------------
/src/components/star/star48_half@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star48_half@2x.png
--------------------------------------------------------------------------------
/src/components/star/star48_half@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star48_half@3x.png
--------------------------------------------------------------------------------
/src/components/star/star48_off@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star48_off@2x.png
--------------------------------------------------------------------------------
/src/components/star/star48_off@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star48_off@3x.png
--------------------------------------------------------------------------------
/src/components/star/star48_on@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star48_on@2x.png
--------------------------------------------------------------------------------
/src/components/star/star48_on@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RegToss/Vue-SPA/4c24b4c2fe8d5e3bd3b1c1cd335ee589160498e6/src/components/star/star48_on@3x.png
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue';
4 | import App from './App';
5 | import VueRouter from 'vue-router';
6 | import VueResource from 'vue-resource';
7 | import VueBus from 'vue-bus';
8 | import goods from './components/goods/goods.vue';
9 | import ratings from './components/ratings/ratings.vue';
10 | import seller from './components/seller/seller.vue';
11 |
12 | //引入自定义的css样式
13 | import './common/stylus/index.styl';
14 |
15 | Vue.config.productionTip = false;
16 | Vue.use(VueRouter);
17 | //全局注册VueResource
18 | Vue.use(VueResource);
19 | //vue-bus事件处理中心
20 | Vue.use(VueBus);
21 | const routes = [
22 | { path: '/goods', component: goods },
23 | { path: '/ratings', component: ratings },
24 | { path: '/seller', component: seller }
25 | ];
26 |
27 | const router = new VueRouter({
28 | routes, // （缩写）相当于 routes: routes
29 | linkActiveClass: 'active'
30 | });
31 | // 页面加载自动导航到goods页面
32 | router.push('/goods');
33 | /* eslint-disable no-new */
34 | new Vue({
35 | el: '#app',
36 | router,
37 | template: '