cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改页面样式

Browse Source
This commit is contained in:
Gaoxs
2020-09-01 17:55:08 +08:00
parent 12238a98d6
commit eefed9b9a0
13 changed files with 689 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
components/Adv.vue Normal file
View File

@ -0,0 +1,207 @@
<template>
<view class="adv-box mx20 mb10">
<!-- 模板1-->
<view class="x-f" v-if="detail.style == 1">
<image style="width:710rpx;height: 220rpx;" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
</view>
<!-- 模板2-->
<view class="type1 x-f" v-if="detail.style == 2">
<image class="type1-img" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
<image class="type1-img" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image>
</view>
<!-- 模板3-->
<view class="type2 x-bc" v-if="detail.style == 3">
<image class="type2-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
<view class="y-f type2-box">
<image class="type2-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill" style="border-bottom:1rpx solid #f6f6f6"></image>
<image class="type2-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image>
</view>
</view>
<!-- 模板4-->
<view class="type3 x-bc" v-if="detail.style == 4">
<view class="type3-box y-f">
<image class="type3-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
<image class="type3-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image>
</view>
<image class="type3-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image>
</view>
<!-- 模板5-->
<view class="type4 y-f" v-if="detail.style == 5">
<view class="type4-box x-f">
<image class="type4-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
<image class="type4-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image>
</view>
<image class="type4-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image>
</view>
<!-- 模板6-->
<view class="type5 y-f" v-if="detail.style == 6">
<image class="type5-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
<view class="type5-box x-bc">
<image class="type5-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill" style="border-bottom:1rpx solid #f6f6f6"></image>
<image class="type5-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image>
</view>
</view>
<!-- 模板7-->
<view class="type6 y-f" v-if="detail.style == 7">
<view class="x-f type6-box1">
<image class="type6-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image>
<image class="type6-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image>
</view>
<view class="x-f type6-box2">
<image class="type6-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image>
<image class="type6-img2" @tap="jump(detail.list[3].path)" :src="detail.list[3].image" mode="aspectFill"></image>
<image class="type6-img2" @tap="jump(detail.list[4].path)" :src="detail.list[4].image" mode="aspectFill"></image>
</view>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {};
},
props: {
detail: {}
},
computed: {},
created() {},
methods: {
// 路由跳转
jump(path) {
this.$tools.routerTo(path);
}
}
};
</script>
<style lang="scss">
.adv-box {
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
.type1 {
.type1-img {
flex: 1;
height: 220rpx;
&:first-child {
border-right: 1rpx solid #f6f6f6;
}
}
}
.type2 {
.type2-img1 {
width: (710rpx/2);
height: 340rpx;
border-right: 1rpx solid #f6f6f6;
}
.type2-box {
flex: 1;
height: 340rpx;
width: (710rpx/2);
.type2-img2 {
height: (340rpx/2);
}
}
}
.type3 {
.type3-box {
width: (710rpx/2);
border-right: 1rpx solid #f6f6f6;
.type3-img1 {
flex: 1;
height: (340rpx/2);
&:first-child {
border-bottom: 1rpx solid #f6f6f6;
}
}
}
.type3-img2 {
flex: 1;
height: 340rpx;
width: (710rpx/2);
}
}
.type4 {
.type4-box {
border-bottom: 1rpx solid #f6f6f6;
.type4-img1 {
flex: 1;
height: (340rpx/2);
&:first-child {
border-right: 1rpx solid #f6f6f6;
}
}
}
.type4-img2 {
flex: 1;
height: (340rpx/2);
width: 710rpx;
}
}
.type5 {
.type5-img1 {
width: 710rpx;
height: (340rpx/2);
border-bottom: 1rpx solid #f6f6f6;
}
.type5-box {
flex: 1;
height: (340rpx/2);
width: 710rpx;
.type5-img2 {
height: (340rpx/2);
&:first-child {
border-right: 1rpx solid #f6f6f6;
}
}
}
}
.type6 {
.type6-box1 {
.type6-img1 {
width: (710rpx/2);
height: (340rpx/2);
&:first-child {
border-right: 1rpx solid #f6f6f6;
}
}
}
.type6-box2 {
border-top: 1rpx solid #f6f6f6;
.type6-img2 {
width: (710rpx/3);
height: (340rpx/2);
border-right: 1rpx solid #f6f6f6;
&:last-child {
border-right: 0;
}
}
}
}
image {
// background-color: #ccc;
}
}
</style>

155
components/Menu.vue Normal file
View File

@ -0,0 +1,155 @@
<template>
<!-- 产品分类导航 -->
<view class="menu-category-box mb10" v-if="carousel" :style="list.length <= menu ? `height:200rpx` : `height:360rpx`">
<swiper
class="menu-swiper-box"
:style="list.length <= menu ? `height:160rpx` : `height:320rpx`"
@change="onSwiper"
circular
:autoplay="false"
:interval="3000"
:duration="1000"
>
<swiper-item class="menu-swiper-item" v-for="(itemList, index) in carousel" :key="index" :style="list.length <= menu ? `height:200rpx` : `height:340rpx`">
<view class="menu-tab-box">
<view class="tab-list y-f" :style="{ width: 690 / menu + 'rpx' }" v-for="item in itemList" :key="item.name" @tap="routerTo(item)">
<image class="tab-img shopro-selector-circular" :style="{ width: imgW + 'rpx', height: imgW + 'rpx' }" :src="item.pic"></image>
<text class="shopro-selector-rect">{{ item.name }}</text>
</view>
</view>
</swiper-item>
</swiper>
<view class="menu-category-dots" v-if="carousel.length > 1">
<text :class="categoryCurrent === index ? 'category-dot-active' : 'category-dot'" v-for="(dot, index) in carousel.length" :key="index"></text>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
categoryCurrent: 0 //分类轮播下标
};
},
props: {
list: {
type: Array,
default: []
},
menu: {
default: 5
},
imgW: {
type: Number,
default: 88
}
},
computed: {
carousel() {
if (this.list) {
let list = this.sortData(this.list, this.menu * 2);
return list;
}
}
},
created() {},
methods: {
// 数据分层
sortData(oArr, length) {
let arr = [];
let minArr = [];
oArr.forEach(c => {
if (minArr.length === length) {
minArr = [];
}
if (minArr.length === 0) {
arr.push(minArr);
}
minArr.push(c);
});
return arr;
},
// 轮播
onSwiper(e) {
this.categoryCurrent = e.detail.current;
},
// 路由跳转
routerTo(item) {
this.$yrouter.push(item.uniapp_url);
}
}
};
</script>
<style lang="scss">
// 产品分类
.y-f {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.menu-category-box {
padding: 30rpx 30rpx 0 30rpx;
background: #fff;
box-sizing: border-box;
}
.menu-category-box,
.menu-swiper-box {
position: relative;
background: #fff;
.menu-swiper-item {
background: #fff;
height: 100%;
width: 100%;
}
.menu-tab-box {
display: flex;
flex-wrap: wrap;
.tab-list {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
padding-bottom: 30rpx;
.tab-img {
border-radius: 25rpx;
margin-bottom: 10rpx;
}
}
}
.menu-category-dots {
display: flex;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20rpx;
.category-dot {
width: 40rpx;
height: 3rpx;
background: #eeeeee;
margin-right: 10rpx;
}
.category-dot-active {
width: 40rpx;
height: 3rpx;
background: #a8700d;
margin-right: 10rpx;
}
}
}
</style>