ArenaDetailCard.vue
3.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<template>
<view class="detail_card">
<view class="header_module">
<CommonTitleNav title-name="彩虹体育馆" :mark-color="ThemeColor.PrimaryColor" right-title="4.8分" :sideTitleColor="ThemeColor.PrimaryColor" >
<template #side-content>
<view style="display: flex;align-items: center;font-size: 24rpx;" @click="goMore">
<text style="margin-right: 6rpx;">更多场照</text>
<u-icon name="play-right-fill" :color="ThemeColor.PrimaryColor" size="12"></u-icon>
</view>
</template>
</CommonTitleNav>
<view class="range">距离您1.2km</view>
</view>
<u-scroll-list indicatorWidth="0">
<view class="list_card" v-for="(item, index) in list" :key="index">
<image class="cover" :src="item.thumb"></image>
</view>
</u-scroll-list>
<view class="footer-module">
<view class="left">
<view class="businessTime">营业时间：周一至周五 9:00-23:00</view>
<CommonIconNav icon-name="map" title-content="1.2km 滨湖路地铁C口"></CommonIconNav>
</view>
<view class="right">
<view class="nav">
<u-icon size="20" name="https://bpic.588ku.com/element_origin_min_pic/19/06/15/bf733c98b302dd7b87f9d086310e75ea.jpg"></u-icon>
<text class="text">导航</text>
</view>
<view class="phone">
<u-icon size="20" name="phone"></u-icon>
<text class="text">电话</text>
</view>
</view>
</view>
</view>
</template>
<script>
import CommonTitleNav from '@/components/commonTitleNav.vue'
import CommonIconNav from '@/components/commonIconNav.vue'
import ThemeColor from '@/utils/themeColor'
export default {
components: { CommonTitleNav, CommonIconNav },
data(){
return {
ThemeColor,
list: [{
thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
}]
}
},
methods: {
goMore(){
uni.navigateTo({
url: '/pages/morePhotos/morePhotos'
})
}
}
}
</script>
<style lang="scss" scoped>
.u-scroll-list__indicator{
margin-top: 0;
}
.detail_card{
width: 690rpx;
height: 384rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin: 0 auto;
padding: 34rpx 34rpx 20rpx;
box-sizing: border-box;
.header_module{
.range{
margin: 14rpx 0;
color: #999;
font-size: 24rpx;
line-height: 28rpx;
}
}
.list_card{
width: 224rpx;
height: 136rpx;
margin-right: 20rpx;
&:last-child{
margin-right: 0;
}
.cover{
width: 224rpx;
height: 136rpx;
}
}
.footer-module{
display: flex;
align-content: center;
justify-content: space-between;
margin-top: -40rpx;
.left{
color: #333;
font-size: 24rpx;
line-height: 32rpx;
.businessTime{
margin-bottom: 14rpx;
}
}
.right{
display: flex;
align-items: center;
font-size: 24rpx;
color: #666;
.nav, .phone{
display: flex;
flex-direction: column;
align-items: center;
.text{
margin-top: 6rpx;
}
}
.nav{
margin-right: 40rpx;
}
}
}
}
</style>