Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
U
user
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
hooloo
mp
user
Commits
81e66a57
Commit
81e66a57
authored
Jun 30, 2022
by
weijiguang
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
优化首页UI
parent
778a9a79
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
59 additions
and
279 deletions
+59
-279
components/menuAssembly/index.vue
+54
-274
pages/menu/menu.vue
+5
-5
No files found.
components/menuAssembly/index.vue
View file @
81e66a57
...
@@ -169,214 +169,6 @@ export default {
...
@@ -169,214 +169,6 @@ export default {
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.menu-box
{
min-height
:
100vh
;
.shop-info
{
position
:
absolute
;
left
:
32
rpx
;
color
:
#FFFFFF
;
.shop-box
{
min-width
:
300
rpx
;
font-size
:
28
rpx
;
font-weight
:
600
;
display
:
flex
;
.shop-name
{
flex
:
1
;
}
.arrow-right-select
{
width
:
9
rpx
;
}
}
.distance
{
height
:
46
rpx
;
font-size
:
24
rpx
;
font-weight
:
400
;
color
:
#FFFFFF
;
line-height
:
42
rpx
;
}
}
}
.menu-banner
{
height
:
376
rpx
;
position
:
relative
;
image
{
width
:
100%
;
height
:
376
rpx
;
}
.login-area
{
display
:
flex
;
width
:
624
rpx
;
height
:
88
rpx
;
padding
:
20
rpx
22
rpx
;
background
:
rgba
(
255
,
255
,
255
,
0.2
);
box-shadow
:
0
rpx
4
rpx
6
rpx
0
rpx
rgba
(
0
,
0
,
0
,
0.1
);
border-radius
:
10
rpx
;
backdrop-filter
:
blur
(
10
rpx
);
position
:
absolute
;
z-index
:
1
;
bottom
:
0
;
left
:
64
rpx
;
box-sizing
:
border-box
;
.avatar
{
display
:
flex
;
justify-items
:
center
;
align-items
:
center
;
background
:
red
;
width
:
50
rpx
;
height
:
48
rpx
;
margin-right
:
22
rpx
;
box-shadow
:
0
rpx
4
rpx
8
rpx
0
rpx
rgba
(
50
,
50
,
50
,
0.25
);
border-radius
:
4
rpx
;
image
{
width
:
100%
;
height
:
100%
;
}
;
}
.user-info
{
flex
:
1
;
.user-name
{
height
:
28
rpx
;
font-size
:
20
rpx
;
color
:
#FFFFFF
;
line-height
:
22
rpx
;
}
.dialog
{
display
:
flex
;
height
:
22
rpx
;
font-size
:
16
rpx
;
font-weight
:
400
;
color
:
#FFFFFF
;
line-height
:
22
rpx
;
.content
{
flex
:
1
;
}
.arrow
{
width
:
10
rpx
;
height
:
12px
;
display
:
flex
;
font-size
:
20
rpx
;
justify-content
:
center
;
align-items
:
center
;
}
}
}
.login-btn
{
//
width
:
114
rpx
;
height
:
48
rpx
;
background
:
#006ECF
;
border-radius
:
4
rpx
;
font-size
:
20
rpx
;
font-weight
:
500
;
color
:
#FFFFFF
;
line-height
:
48
rpx
;
text-align
:
center
;
}
}
}
.order-banner
{
width
:
686
rpx
;
height
:
179
rpx
;
background
:
#FFFFFF
;
box-shadow
:
0
rpx
4
rpx
8
rpx
0
rpx
rgba
(
166
,
166
,
166
,
0.5
);
border-radius
:
10
rpx
;
box-sizing
:
border-box
;
position
:
relative
;
left
:
32
rpx
;
top
:
-8
rpx
;
z-index
:
1
;
display
:
flex
;
.info
{
padding-left
:
32
rpx
;
flex
:
1
;
.first
{
height
:
44
rpx
;
font-size
:
32
rpx
;
font-weight
:
600
;
color
:
#323232
;
line-height
:
44
rpx
;
margin-top
:
40
rpx
;
}
.second
{
margin-top
:
20
rpx
;
height
:
34
rpx
;
font-size
:
24
rpx
;
font-weight
:
500
;
color
:
#323232
;
line-height
:
34
rpx
;
.time
{
font-size
:
28
rpx
;
font-weight
:
normal
;
color
:
#006ECF
;
margin
:
0
16
rpx
;
}
}
}
.line
{
width
:
0
;
height
:
104
rpx
;
border-right
:
4
rpx
solid
#006ECF
;
position
:
absolute
;
right
:
188
rpx
;
top
:
36
rpx
;
}
.barCode-box
{
margin-top
:
30
rpx
;
width
:
150
rpx
;
height
:
122
rpx
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
text-align
:
center
;
flex-direction
:
column
;
.barCode
{
width
:
86
rpx
;
height
:
86
rpx
;
background
:
#006ECF
;
image
{
width
:
100%
;
height
:
100%
;
}
}
.barCode-dis
{
text-align
:
center
;
margin-top
:
14
rpx
;
font-size
:
16
rpx
;
font-weight
:
500
;
color
:
#666666
;
line-height
:
22
rpx
;
}
}
}
.page-body
{
.page-body
{
display
:
flex
;
display
:
flex
;
background
:
#fff
;
background
:
#fff
;
...
@@ -410,6 +202,17 @@ export default {
...
@@ -410,6 +202,17 @@ export default {
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
}
}
.active
{
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
box-shadow
:
0px
4px
8px
0px
rgba
(
102
,
102
,
102
,
0.1
);
font-weight
:
500
;
color
:
#333333
;
background
:
#FFFFFF
;
font-size
:
24
rpx
;
background
:
#fff
;
border-right
:
4
rpx
solid
#0050F6
;
}
.nav-left-item
:last-child
{
.nav-left-item
:last-child
{
border-bottom
:
none
;
border-bottom
:
none
;
}
}
...
@@ -418,9 +221,8 @@ export default {
...
@@ -418,9 +221,8 @@ export default {
box-sizing
:
border-box
;
box-sizing
:
border-box
;
height
:
calc
(
100vh
-
var
(
--scroll-height
));
height
:
calc
(
100vh
-
var
(
--scroll-height
));
overflow
:
auto
;
overflow
:
auto
;
padding-top
:
40
rpx
;
width
:
585.21
rpx
;
width
:
585.21
rpx
;
padding-top
:
42
rpx
;
}
}
.buiedcss
{
.buiedcss
{
height
:
calc
(
100vh
-
376
rpx
-
183
rpx
);
height
:
calc
(
100vh
-
376
rpx
-
183
rpx
);
...
@@ -444,20 +246,20 @@ export default {
...
@@ -444,20 +246,20 @@ export default {
.right-title
{
.right-title
{
font-family
:
PingFangSC-Semibold
,
PingFang
SC
;
font-family
:
PingFangSC-Semibold
,
PingFang
SC
;
padding-left
:
3
1
rpx
;
padding-left
:
3
2
rpx
;
margin-bottom
:
30
rpx
;
margin-bottom
:
25
rpx
;
height
:
4
0
rpx
;
height
:
4
4
rpx
;
font-size
:
32
rpx
;
font-size
:
32
rpx
;
font-weight
:
600
;
font-weight
:
600
;
color
:
#333333
;
color
:
#333333
;
line-height
:
4
0
rpx
;
line-height
:
4
4
rpx
;
}
}
.nav-right-item
{
.nav-right-item
{
display
:
flex
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
padding
:
0
rpx
32
rpx
0
rpx
3
1.37
rpx
;
padding
:
0
rpx
32
rpx
0
rpx
3
2
rpx
;
margin-bottom
:
70
rpx
;
margin-bottom
:
64
rpx
;
background
:
#fff
;
background
:
#fff
;
position
:
relative
;
position
:
relative
;
.thumbnailBox{
.thumbnailBox{
...
@@ -471,11 +273,10 @@ export default {
...
@@ -471,11 +273,10 @@ export default {
}
}
.thumbnail
{
.thumbnail
{
//缩略图
//缩略图
display
:
flex
;
align-items
:
center
;
width
:
160
rpx
;
width
:
160
rpx
;
height
:
160
rpx
;
height
:
160
rpx
;
margin-top
:
6
rpx
;
margin-top
:
-2
rpx
;
vertical-align
:
bottom
;
}
}
}
}
...
@@ -495,7 +296,7 @@ export default {
...
@@ -495,7 +296,7 @@ export default {
.tags
{
.tags
{
height
:
28
rpx
;
height
:
28
rpx
;
margin-top
:
7.91
rpx
;
margin-top
:
8
rpx
;
.tag-item
{
.tag-item
{
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
background-color
:
#F0F0F0
;
background-color
:
#F0F0F0
;
...
@@ -512,7 +313,7 @@ export default {
...
@@ -512,7 +313,7 @@ export default {
font-size
:
20
rpx
;
font-size
:
20
rpx
;
font-weight
:
400
;
font-weight
:
400
;
color
:
#666666
;
color
:
#666666
;
margin-top
:
1
3.46
rpx
;
margin-top
:
1
4
rpx
;
height
:
22
rpx
;
height
:
22
rpx
;
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
font-family
:
PingFangSC-Regular
,
PingFang
SC
;
...
@@ -524,49 +325,51 @@ export default {
...
@@ -524,49 +325,51 @@ export default {
}
}
.mon
{
.mon
{
height
:
38
rpx
;
height
:
40
rpx
;
display
:
flex
;
display
:
flex
;
justify-content
:
space-between
;
justify-content
:
space-between
;
align-items
:
center
;
align-items
:
center
;
margin-top
:
22.64
rpx
;
margin-top
:
22
rpx
;
.discount
{
font-family
:
Futura-Medium
,
Futura
;
height
:
38
rpx
;
font-size
:
28
rpx
;
color
:
#333333
;
line-height
:
54
rpx
;
margin-right
:
4.2
rpx
;
font-weight
:
500
;
.moneyLog
{
font-size
:
24
rpx
;
}
}
.price
{
flex
:
1
;
height
:
38
rpx
;
font-size
:
20
rpx
;
color
:
#999999
;
font-family
:
Futura-Medium
,
Futura
;
line-height
:
60
rpx
;
.num
{
text-decoration
:
line-through
;
}
}
.priceBox{
.priceBox{
display
:
flex
;
display
:
flex
;
flex-wrap
:
nowrap
;
flex-wrap
:
nowrap
;
align-items
:
flex-end
;
align-items
:
flex-end
;
justify-content
:
flex-start
;
justify-content
:
flex-start
;
.discount
{
font-family
:
Futura-Medium
,
Futura
;
height
:
38
rpx
;
font-size
:
28
rpx
;
color
:
#333333
;
line-height
:
30
rpx
;
margin-right
:
4.2
rpx
;
font-weight
:
500
;
.moneyLog
{
font-size
:
24
rpx
;
}
}
.price
{
flex
:
1
;
height
:
26
rpx
;
font-size
:
20
rpx
;
color
:
#999999
;
font-family
:
Futura-Medium
,
Futura
;
line-height
:
26
rpx
;
.num
{
text-decoration
:
line-through
;
}
}
}
}
.addbox
{
.addbox
{
line-height
:
26
rpx
;
//
line-height
:
26
rpx
;
margin-top
:
20
rpx
;
//
margin-top
:
20
rpx
;
.add{
.add{
width
:
40
rpx
;
width
:
40
rpx
;
height
:
40
rpx
;
height
:
40
rpx
;
margin-top
:
1
rpx
;
}
}
}
}
...
@@ -590,29 +393,6 @@ export default {
...
@@ -590,29 +393,6 @@ export default {
height
:
150
rpx
;
height
:
150
rpx
;
}
}
.active
{
font-family
:
PingFangSC-Medium
,
PingFang
SC
;
box-shadow
:
0px
4px
8px
0px
rgba
(
102
,
102
,
102
,
0.1
);
font-weight
:
500
;
color
:
#333333
;
background
:
#FFFFFF
;
font-size
:
24
rpx
;
background
:
#fff
;
border-right
:
4
rpx
solid
#0050F6
;
}
.active-line
{
height
:
100%
;
width
:
4
rpx
;
position
:
absolute
;
right
:
5
rpx
;
box-sizing
:
border-box
;
top
:
0
;
background
:
#0050F6
;
z-index
:
1
;
border
:
4
rpx
solid
#0050F6
;
}
::-webkit-scrollbar
{
::-webkit-scrollbar
{
/*取消小程序的默认导航条样式*/
/*取消小程序的默认导航条样式*/
width
:
0
;
width
:
0
;
...
...
pages/menu/menu.vue
View file @
81e66a57
<
template
>
<
template
>
<view
class=
"menu-box"
>
<view
class=
"menu-box"
>
<view
class=
"menu-banner"
:style=
"
{'height':buied?'360rpx':'450rpx'}">
<view
class=
"menu-banner"
:style=
"
{'height':buied?'360rpx':'450rpx'}">
<video
autoplay
muted
loop
:controls=
"false"
:enable-progress-gesture=
"false"
objectFit=
'cover'
src=
"http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/71d36be0ed966.mp4"
></video
>
<video
autoplay
muted
loop
:controls=
"false"
:enable-progress-gesture=
"false"
objectFit=
'cover'
src=
"http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/71d36be0ed966.mp4"
/
>
<view
class=
"shop-info"
:style=
"'top:
86
rpx'"
>
<view
class=
"shop-info"
:style=
"'top:
100
rpx'"
>
<view
class=
"shop-box"
>
<view
class=
"shop-box"
>
<text
@
click=
"showArea"
class=
"shop-name"
>
{{
shopInfo
.
name
}}
</text>
<text
@
click=
"showArea"
class=
"shop-name"
>
{{
shopInfo
.
name
}}
</text>
<image
class=
"arrow-right-select"
:src=
"'../../static/imgs/jiantoubai.png'"
/>
<image
class=
"arrow-right-select"
:src=
"'../../static/imgs/jiantoubai.png'"
/>
...
@@ -364,14 +364,14 @@ export default {
...
@@ -364,14 +364,14 @@ export default {
display
:
flex
;
display
:
flex
;
width
:
686
rpx
;
width
:
686
rpx
;
height
:
104
rpx
;
height
:
104
rpx
;
padding
:
1
8.8
rpx
32
rpx
18.8
rpx
34
rpx
;
padding
:
1
6
rpx
32
rpx
16
rpx
34
rpx
;
background
:
#ffffff
;
background
:
#ffffff
;
position
:
absolute
;
position
:
absolute
;
z-index
:
1
;
z-index
:
1
;
bottom
:
-
5
rpx
;
bottom
:
-
2
rpx
;
left
:
32
rpx
;
left
:
32
rpx
;
box-sizing
:
border-box
;
box-sizing
:
border-box
;
box-shadow
:
0px
4
px
8px
0px
rgba
(
102
,
102
,
102
,
0.1
);
box-shadow
:
0px
2
px
8px
0px
rgba
(
102
,
102
,
102
,
0.1
);
backdrop-filter
:
blur
(
0px
);
backdrop-filter
:
blur
(
0px
);
z-index
:
9
;
z-index
:
9
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment