前端
精选景点组件(@/home/FineBox)
1、VantUI中找组件
找到左右结构的单元格作为顶部单元格
1
2
3
4
<van-cell-group>
<van-cell title="单元格" value="内容" />
<van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>
顶部单元格内的图标
1
<van-icon name="location-o" />
评分组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<van-rate
v-model="value"
allow-half
:size="25"
color="#ffd21e"
void-icon="star"
void-color="#eee"
/>
export default {
data() {
return {
value: 3,
};
},
};
2、模板
顶部单元格
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<!-- 精选景点 -->
<div class="home-fine-box">
<!-- 顶上导航 -->
<van-cell
title="精选景点"
icon="location-o"
value="更多"
title-style="text-align:left"
is-link/>
<!-- // 顶上导航 -->
</div>
</template>
景点列表
1
2
3
4
5
<!-- 景点列表 -->
<div class="box-main">
...
</div>
<!-- // 景点列表 -->
分为左右结构
左边图片
1
2
3
4
5
6
7
<div class="box-main">
<a href="#" class="sight-item">
<!-- 左边的图片 -->
<img src="/static/home/hot/h1.jpg" alt="">
</a>
</div>
<!-- // 景点列表 -->
右边文字
景点标题
1
2
3
4
5
6
7
8
9
10
<div class="box-main">
<a href="#" class="sight-item">
...
<!-- 右边的文字 -->
<div class="right">
<h5>标题</h5>
</div>
</a>
</div>
<!-- // 景点列表 -->
评分星星
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="box-main">
<a href="#" class="sight-item">
...
<!-- 右边的文字 -->
<div class="right">
...
<van-rate
readonly
v-model="value"
allow-half
:size="25"
color="#ffd21e"
void-icon="star"
void-color="#eee"
/>
</div>
</a>
</div>
<!-- // 景点列表 -->
点评和满意度、城市、价格(tips light 并列标签)
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="box-main">
<a href="#" class="sight-item">
...
<!-- 右边的文字 -->
<div class="right">
...
<div class="tips">4人点评 | 100%满意</div>
<div class="tips light">广东-广州</div>
<div class="line-price">￥ 98 起</div>
</div>
</a>
</div>
<!-- // 景点列表 -->
3、样式
实现左右结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style lang="less">
.home-fine-box {
.box-main {
// 景点列表
.sight-item {
display: flex;
img { // 填充满左半部分
width: 100px;
height: 100px;
}
}
}
}
</style>
right:右边文字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style lang="less">
.home-fine-box {
.box-main {
// 景点列表
.sight-item {
...
.right {
text-align: left; // 让文字向左对齐
flex-grow: 1; // 撑满整个区域
padding-left: 5px;
position: relative; // 绝对定位
}
}
}
}
</style>
h5:景点标题样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style lang="less">
.home-fine-box {
.box-main {
// 景点列表
.sight-item {
...
.right {
...
h5 {
color: #212121;
font-size: 14px;
padding: 5px 0;
margin: 0;
}
}
}
}
}
</style>
line-price:价格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style lang="less">
.home-fine-box {
.box-main {
// 景点列表
.sight-item {
...
.right {
...
.line-price { // 绝对于整个容器定位
position: absolute;
right: 10px;
top: 20px;
display: inline-block;
color: #f50;
font-size: 16px; // 字体大小
font-weight: bold; // 字体加粗
}
}
}
}
}
</style>
tips:满意度和地区文字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style lang="less">
.home-fine-box {
.box-main {
// 景点列表
.sight-item {
...
.right {
...
.tips {
font-size: 12px;
color: #666;
&.light { // 让下面的字体浅色一点
color: #999;
}
}
}
}
}
}
</style>
4、Home页面中引用轮播图组件(@/views/HomeView)
引入组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
...
// fine
import Fine from '@/components/home/FineBox'
export default {
name: 'HomeView',
components: {
...
// fine
Fine
}
}
</script>
展示
1
2
3
4
5
6
7
<template>
<div class="home">
...
<!-- fine -->
<Fine/>
</div>
</template>
5、填充数据
准备数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
export default {
data () {
return {
dataList: []
}
},
created () {
this.dataList = [
{id: 1, name: '景点名称', score: 5, price: 98},
{id: 2, name: '景点名称', score: 4.5, price: 98},
{id: 3, name: '景点名称', score: 4, price: 98},
{id: 4, name: '景点名称', score: 4.5, price: 98},
{id: 5, name: '景点名称', score: 4.5, price: 98}
]
}
}
</script>
模型中进行绑定
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
<template>
<!-- 精选景点 -->
<div class="home-fine-box">
...
<!-- 景点列表 -->
<div class="box-main">
<a href="#" class="sight-item"
v-for="item in dataList"
:key="item.id">
<!-- 左边的图片 -->
<img src="/static/home/hot/h1.jpg" alt="">
<!-- 右边的文字 -->
<div class="right">
<h5></h5>
<van-rate
readonly
v-model="item.score"
allow-half
:size="25"
color="#ffd21e"
void-icon="star"
void-color="#eee"
/>
<div class="tips">4人点评 | 100%满意</div>
<div class="tips light">广东-广州</div>
<div class="line-price">￥ 起</div>
</div>
</a>
</div>
<!-- // 景点列表 -->
</div>
</template>
6、优化样式
景点图片和边框脱离重合
1
2
3
4
5
6
7
8
9
10
11
12
13
<style lang="less">
.home-fine-box {
.box-main {
// 景点列表
padding: 0 10px;
padding-bottom: 50px;
.van-cell {
padding: 10px 0;
}
...
}
}
</style>
添加下划线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.home-fine-box {
.box-main {
// 景点列表
padding: 0 10px;
.van-cell {
padding: 10px 0;
}
.sight-item {
display: flex;
margin-top: 10px;
border-bottom: 1px solid #f6f6f6; // 下划线
...
}
}
}
</style>