【vue3.0】6.0 某东到家（六）——vue精简代码、css约束、vue工具使用
src\views\home\Docker.vue
<template>
<!-- 底部主菜单容器 -->
<div class="docker">
<span
:class="['docker__item', item.active]"
v-for="(item, index) in dockerList"
:key="index"
>
<div class="docker__item_icon">
<i :class="item.icon"></i>
</div>
<div class="docker__item__title">{{ item.title }}</div>
</span>
</div>
</template>
<script>
export default {
name: 'Docker',
setup () {
const dockerList = [
{
active: 'docker__item--active',
icon: 'custom-icon custom-icon-home',
title: '首页'
},
{
icon: 'custom-icon custom-icon-shopping',
title: '购物车'
},
{
icon: 'custom-icon custom-icon-order',
title: '订单'
},
{
icon: 'custom-icon custom-icon-my',
title: '我的'
}
]
return { dockerList }
}
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables';
@import '@/style/mixins';
.docker {
color: $content-font-color;
display: flex; //自适应均赠,弹性盒子
position: absolute; //绝对定位
box-sizing: border-box; //这个会以body的最外层作为容器的最外层
padding: 0 0.18rem;
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top: 1px solid $content-bg-color;
&__item {
flex: 1;
text-align: center;
&--active {
color: #1fa4fc;
}
&_icon {
margin: 0.05rem 0 0.02rem 0; //图标距离上边距7px左右;
font-size: 0.18rem;
}
&__title {
//浏览器最小像素是12px，如果想表达12px以下大小得如下编写
font-size: 0.12rem;
transform: scale(0.5 0.5); //横向缩小50% 纵向搜小50%
transform-origin: center top; //缩放的中心点
}
}
}
</style>
更好的可以如下写：
<template>
<!-- 底部主菜单容器 -->
<div class="docker">
<span
:class="{ docker__item: true, 'docker__item--active': item.active }"
v-for="(item, index) in dockerList"
:key="index"
>
<div class="docker__item_icon">
<i :class="item.icon"></i>
</div>
<div class="docker__item__title">{{ item.title }}</div>
</span>
</div>
</template>
<script>
export default {
name: 'Docker',
setup () {
const dockerList = [
{
active: true,
icon: 'custom-icon custom-icon-home',
title: '首页'
},
{
icon: 'custom-icon custom-icon-shopping',
title: '购物车'
},
{
icon: 'custom-icon custom-icon-order',
title: '订单'
},
{
icon: 'custom-icon custom-icon-my',
title: '我的'
}
]
return { dockerList }
}
}
</script>
......
调整src\views\home\Nearby.vue:
<template>
<!-- 主体商铺展示内容 -->
<div class="nearby">
<h3 class="nearby__title">附近店铺</h3>
<!-- 5个 -->
<div class="nearby__item" v-for="(item, index) in nearbyList" :key="index">
<img :src="item.headImg" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">{{ item.title }}</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">{{ item.tags[0] }}</span>
<span class="nearby__item__content__tag">{{ item.tags[1] }}</span>
<span class="nearby__item__content__tag">{{ item.tags[2] }}</span>
</div>
<p class="nearby__item__content__highlight">
{{ item.highlight }}
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Nearby',
setup () {
const nearbyList = [
{
title: '某尔玛',
headImg: '/i18n/9_16/img/near.png',
tags: ['月售1万+', '起送￥0', '基础运费￥5'],
highlight: 'VIP尊享89元减4元运费券(每月3张)'
},
{
title: '某尔玛',
headImg: '/i18n/9_16/img/near.png',
tags: ['月售1万+', '起送￥0', '基础运费￥5'],
highlight: 'VIP尊享89元减4元运费券(每月3张)'
},
{
title: '某尔玛',
headImg: '/i18n/9_16/img/near.png',
tags: ['月售1万+', '起送￥0', '基础运费￥5'],
highlight: 'VIP尊享89元减4元运费券(每月3张)'
},
{
title: '某尔玛',
headImg: '/i18n/9_16/img/near.png',
tags: ['月售1万+', '起送￥0', '基础运费￥5'],
highlight: 'VIP尊享89元减4元运费券(每月3张)'
}
]
return { nearbyList }
}
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables';
@import '@/style/mixins';
.nearby {
&__title {
margin: 0.16rem 0 0.02rem 0;
font-size: 0.18rem;
color: $content-font-color;
font-weight: normal; //不加粗展示
}
&__item {
display: flex;
padding-top: 0.12rem;
// 图片
&__img {
margin-right: 0.16rem;
width: 0.56rem;
height: 0.56rem;
}
//右侧文字内容
&__content {
padding-bottom: 0.12rem;
border-bottom: 1px solid $content-bg-color;
flex: 1;
&__title {
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
}
&__tags {
margin-top: 0.08rem;
line-height: 0.18rem;
font-size: 0.13rem;
color: $content-font-color;
}
&__tag {
margin-right: 0.16rem;
}
&__highlight {
color: #e93b3b;
line-height: 0.18rem;
font-size: 0.13rem;
margin: 0.08rem 0 0 0;
}
}
}
}
</style>
调整src\views\home\StaticPart.vue:
<template>
<!-- 顶部位置信息、通知栏 -->
<div class="position">
<span>
<i class="position__icon custom-icon custom-icon-position"></i>
</span>
西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
<i class="position__notice custom-icon custom-icon-bell"></i>
</div>
<!-- 搜索栏 -->
<div class="search">
<span class="search__icon">
<i class="custom-icon custom-icon-search"></i>
</span>
<span class="search__text"> 黄焖鸡米饭</span>
</div>
<!-- 横幅广告推广栏 -->
<div class="banner">
<img class="banner__img" src="/i18n/9_16/img/banner.jpg" />
</div>
<!-- 分类列表栏 -->
<div class="category_list">
<!-- 10个 -->
<div
class="category_list__item"
v-for="(item, index) in categoryList"
:key="index"
>
<img
class="category_list__item__img"
:src="item.imgUrl"
/>
<p class="category_list__item__desc">{{item.title}}</p>
</div>
</div>
<!-- 灰色留白分隔栏 -->
<div class="gap"></div>
</template>
<script>
export default {
name: 'StaticPart',
setup () {
const categoryList = [
{
imgUrl: '/i18n/9_16/img/category_list/超市.png',
title: '超市便利'
},
{
imgUrl: '/i18n/9_16/img/category_list/菜市场.png',
title: '菜市场'
},
{
imgUrl: '/i18n/9_16/img/category_list/水果店.png',
title: '水果店'
},
{
imgUrl: '/i18n/9_16/img/category_list/鲜花.png',
title: '鲜花绿植'
},
{
imgUrl: '/i18n/9_16/img/category_list/医药健康.png',
title: '医药健康'
},
{
imgUrl: '/i18n/9_16/img/category_list/家居.png',
title: '家居时尚'
},
{
imgUrl: '/i18n/9_16/img/category_list/蛋糕.png',
title: '烘焙蛋糕'
},
{
imgUrl: '/i18n/9_16/img/category_list/签到.png',
title: '签到'
},
{
imgUrl: '/i18n/9_16/img/category_list/大牌免运.png',
title: '大牌免运'
},
{
imgUrl: '/i18n/9_16/img/category_list/红包.png',
title: '红包套餐'
}
]
return { categoryList }
}
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables';
@import '@/style/mixins';
.position {
//文字显示省略号配置
@include ellipsis;
// 其他一般设定
position: relative;
padding: 0.16rem 0.24rem 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
.position__icon {
position: relative;
top: 0.01rem;
font-size: 0.2rem;
margin-right: 0.08rem;
}
.position__notice {
top: 0.17rem;
right: 0;
position: absolute;
font-size: 0.2rem;
}
}
.search {
margin-bottom: 0.12rem;
line-height: 0.32rem; //行高：将会自动撑开
background: #f5f5f5;
color: #b7b7b7;
border-radius: 0.16rem;
font-size: 0.14rem;
&__icon {
display: inline-block;
padding: 0 0.05rem 0 0.16rem;
font-size: 0.15rem;
}
&__text {
display: inline-block;
font-size: 0.14rem;
}
}
.banner {
height: 0%;
overflow: hidden;
padding-bottom: 25%; //屏幕宽度的25%
&__img {
width: 100%;
}
}
.category_list {
display: flex; //flex布局:弹性盒
flex-wrap: wrap; //让弹性盒元素在必要的时候拆行
margin-top: 0.16rem;
&__item {
width: 20%;
&__img {
display: block;
width: 0.4rem;
height: 0.4rem;
margin: 0 auto;
}
&__desc {
margin: 0.06rem 0 0.16rem 0;
text-align: center;
color: $content-font-color;
}
}
}
.gap {
height: 0.1rem;
background: $content-bg-color;
margin: 0 -0.18rem;
}
</style>
scoped
只对当前组件有效
name
export default {
name: 'Docker',
就是上面的name，可以不写，为什么写，是因为用于vue调试工具（Vue.js devtools）
如果不写，调试工具会显示文件的名字。
发表评论 (审核通过后显示评论)：