code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2025-12-17 16:05:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 11:03:32 +08:00
commit 23804939eb
2158 changed files with 149684 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
pages/tabbar/home/template/advertising.scss Normal file
View File

@@ -0,0 +1,57 @@
.position-box{
position: absolute;
right: 0;
bottom: 0;
}
.join-box {
display: flex;
}
.item-price {
> span {
font-size: 15px;
font-weight: 500;
color: #e1212b;
}
}
.join-item {
flex: 1;
}
.item-img {
width: 75px;
height: 75px;
margin: 0 auto;
display: block;
}
.item-img-box {
position: relative;
}
.item-line-through {
> span {
font-size: 10px;
font-weight: 400;
text-decoration: line-through;
color: #999;
}
}
.item-position-tips {
position: absolute;
right: 0;
color: #fff;
font-size: 12px;
bottom: 0;
}
.join-title {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
height: 50px;
> div:nth-of-type(1) {
font-size: 16px;
font-weight: bold;
}
> div:nth-of-type(2) {
font-size: 12px;
color: #999;
}
}

87
pages/tabbar/home/template/tpl.js Normal file
View File

@@ -0,0 +1,87 @@
/** 配置楼层模块的跳转 */
export function modelnavigateTo(item) {
let val = item.url;
switch (val.___type) {
case "goods":
uni.navigateTo({
url: "/pages/product/goods?id=" + val.id + "&goodsId=" + val.goodsId,
});
break;
case "category":
uni.navigateTo({
url: `/pages/navigation/search/searchPage?category=${val.id}`,
});
break;
case "stores":
uni.navigateTo({
url: `/pages/product/shopPage?id=${val.id}`,
});
break;
// 活动
case "marketing":
uni.navigateTo({
url: "/pages/product/goods?id=" + val.skuId + "goodsId=" + val.goodsId,
});
break;
case "pages":
uni.navigateTo({
url: val.___path + "?id=" + val.id + "&title=" + val.title,
});
break;
case "other":
switch (val.title) {
case "首页":
uni.switchTab({
url: `/`,
});
break;
case "购物车":
uni.switchTab({
url: `/pages/tabbar/cart/cartList`,
});
return;
case "个人中心":
uni.switchTab({
url: `/pages/tabbar/user/my`,
});
break;
case "收藏商品":
uni.navigateTo({
url: `/pages/mine/myCollect`,
});
break;
case "我的订单":
uni.navigateTo({
url: `/pages/order/myOrder?status=0`,
});
break;
case "领券中心":
uni.navigateTo({
url: `/pages/cart/coupon/couponCenter`,
});
break;
case "签到":
uni.navigateTo({
url: `/pages/mine/signIn`,
});
break;
case "秒杀频道":
uni.navigateTo({
url: `/pages/promotion/seckill`,
});
break;
case "拼团频道":
uni.navigateTo({
url: `/pages/promotion/joinGroup`,
});
break;
case "积分商城":
uni.switchTab({
url: `/pages/navigation/point/point-mall`,
});
break;
}
break;
}
}

31
pages/tabbar/home/template/tpl.scss Normal file
View File

@@ -0,0 +1,31 @@
.image-mode {
max-width: 100%;
height: auto;
display: block;
padding: 2rpx;
}
.layout {
padding: 16rpx;
margin: 8rpx 0;
background: #fff;
}
.layout,
.view-height-75,
.view-height-150 {
overflow: hidden;
}
.view-width-100 {
width: 100%;
}
.view-height-75 {
height: 150rpx;
}
.view-height-150 {
height: 300rpx;
flex: 1;
}
.view-height-85 {
height: 170rpx;
flex: 1;
}

37
pages/tabbar/home/template/tpl_banner.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<div class="layout">
<div class="box">
<u-swiper @click="clickSwiper" interval="5000" duration="500" height="300" v-if="res" name="img" :list="res.list">
<u-loading slot="loading"></u-loading>
</u-swiper>
</div>
</div>
</template>
<script>
import { modelnavigateTo } from "./tpl";
export default {
title: "导航栏",
props: ["res"],
watch: {
res: {
handler(newValue, oldValue) {
this.$set(this, "res", newValue);
},
deep: true,
},
},
mounted() {
},
methods: {
clickSwiper(index) {
modelnavigateTo(this.res.list[index]);
},
},
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
</style>

33
pages/tabbar/home/template/tpl_flex_five.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="layout">
<u-image width="140rpx" height="140rpx" @click="modelnavigateTo(item)" class="image-mode" v-for="(item,index) in res.list" :key="index" :src="item.img" alt="">
<u-loading slot="loading"></u-loading>
</u-image>
</div>
</template>
<script>
import { modelnavigateTo } from "./tpl";
export default {
title: "五列单行图片模块",
props: ["res"],
data() {
return {
modelnavigateTo,
};
},
mounted() {
console.log(this.res);
},
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.layout {
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
</style>

39
pages/tabbar/home/template/tpl_flex_four.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div class="layout">
<u-image height="175rpx" width="175rpx" @click="modelnavigateTo(item)" class="image-mode" :src="item.img" v-for="(item,index) in res.list" :key="index" >
<u-loading slot="loading"></u-loading>
</u-image>
</div>
</template>
<script>
import {modelnavigateTo} from './tpl'
export default {
title: "四列单行图片模块",
props: ["res"],
data () {
return {
modelnavigateTo,
}
},
mounted() {
console.log(this.res);
}
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.layout {
height: 84px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
img{
width: 84px;
}
</style>

31
pages/tabbar/home/template/tpl_flex_one.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div class="layout">
<div class="flex-one" @click="modelnavigateTo(res.list[0])">
<u-image width="100%" height="280rpx" :src="res.list[0].img" alt=""></u-image>
</div>
</div>
</template>
<script>
import { modelnavigateTo } from "./tpl";
export default {
data() {
return {
modelnavigateTo,
};
},
props: ["res"],
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.flex-one {
width: 100%;
display: block;
overflow: hidden;
> img {
width: 100%;
height: 100%;
}
}
</style>

38
pages/tabbar/home/template/tpl_flex_three.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div class="layout">
<u-image @click="modelnavigateTo(item)" height="240rpx" width="240rpx" class="image-mode" :src="item.img" v-for="(item, index) in res.list" :key="index">
<u-loading slot="loading"></u-loading>
</u-image>
</div>
</template>
<script>
import { modelnavigateTo } from "./tpl";
export default {
title: "三列单行图片模块",
props: ["res"],
mounted() {
console.log(this.res);
},
data() {
return {
modelnavigateTo,
};
},
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.layout {
height: 110px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
img {
width: 111px;
}
</style>

49
pages/tabbar/home/template/tpl_flex_two.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div class="layout">
<div class="flex-two">
<div class="flex-item" @click="modelnavigateTo(res.list[0])">
<u-image height="325rpx" width="100%" mode="scaleToFill" :src="res.list[0].img" alt>
<u-loading slot="loading"></u-loading>
</u-image>
</div>
<div class="flex-item" @click="modelnavigateTo(res.list[1])">
<u-image height="325rpx" width="100%" mode="scaleToFill" :src="res.list[1].img" alt>
<u-loading slot="loading"></u-loading>
</u-image>
</div>
</div>
</div>
</template>
<script>
import uImage from "@/uview-ui/components/u-image/u-image.vue";
import { modelnavigateTo } from "./tpl";
export default {
components: { uImage },
title: "两张横图",
props: ["res"],
mounted() {
console.log("123");
},
data() {
return {
modelnavigateTo,
};
},
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.flex-two {
width: 100%;
display: flex;
overflow: hidden;
}
.flex-item {
width: 50%;
> img {
display: block;
max-width: 100%;
height: 100%;
}
}
</style>

181
pages/tabbar/home/template/tpl_goods.vue Normal file
View File

@@ -0,0 +1,181 @@
<template>
<div class="layout">
<div class="goods-cell-title">
<div
class="goods-item-title"
:class="{ 'selected-title': selected.index == index }"
@click="handleClickTitle(title, index)"
v-for="(title, index) in res.list[0].titleWay"
:key="index"
>
<h4 class="h4">{{ title.title }}</h4>
<div>{{ title.desc }}</div>
</div>
</div>
<div class="goods-list">
<div
v-if="selected.val == item.type"
@click="handleClick(item)"
class="goods-item"
v-for="(item, item_index) in res.list[0].listWay"
:key="item_index"
>
<div class="goods-img">
<u-image :src="item.img" height="350rpx" mode="aspectFit" width="100%">
<u-loading slot="loading"></u-loading
></u-image>
</div>
<div class="goods-desc">
<div class="goods-title">
{{ item.title }}
</div>
<div class="goods-bottom">
<div class="goods-price">￥{{ item.price | unitPrice }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import uImage from "@/uview-ui/components/u-image/u-image.vue";
export default {
components: { uImage },
data() {
return {
selected: {
index: 0,
val: "精选",
},
};
},
props: ["res"],
mounted() {},
methods: {
handleClick(item) {
console.log(item);
uni.navigateTo({
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
});
},
closeGoods(val, index) {
this.res.list[0].listWay.splice(index, 1);
},
handleClickTitle(val, index) {
this.selected.index = index;
this.selected.val = val.title;
},
},
};
</script>
<style lang="scss" scoped>
$w_94: 94%;
.layout {
padding: 8px 0;
background: #f9f9f9;
}
.selected-title {
> h4 {
font-size: 30rpx;
color: #000 !important;
}
> div {
font-weight: bold;
color: $main-color !important;
}
}
.goods-cell-title {
padding: 10px;
transition: 0.35s;
display: flex;
cursor: pointer;
> .goods-item-title {
flex: 1;
text-align: center;
> h4 {
font-size: 32rpx;
}
> div {
color: #999;
font-size: 24rpx;
}
}
}
.goods-list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.goods-item {
width: 50%;
margin-bottom: 10px;
border-radius: 0.4em;
overflow: hidden;
}
.goods-img {
position: relative;
margin: 0 auto;
// width: 158px;
width: $w_94;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow: hidden;
> img {
width: 100%;
height: 100%;
}
}
.goods-desc {
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
width: $w_94;
background: #fff;
padding: 8rpx 0 8rpx 8rpx;
margin: 0 auto;
> .goods-title {
font-size: 24rpx;
height: 70rpx;
display: -webkit-box;
font-weight: 500;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
> .goods-bottom {
display: flex;
font-weight: bold;
> .goods-price {
line-height: 2;
color: $main-color;
}
}
}
.goods-icon {
right: 10rpx;
top: 10rpx;
position: absolute;
}
</style>

46
pages/tabbar/home/template/tpl_group.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<div class="layout">
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</div>
</div>
<div class="join-box">
<div class="join-item" @click="modelnavigateTo(item)" v-for="item in 4" :key="item">
<div class="item-img-box">
<img
class="item-img"
src="https://picsum.photos/id/268/200/200"
alt
/>
</div>
<div class="item-price">
<span>￥120.00</span>
</div>
<div class="item-line-through">
<span>￥190.00</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {modelnavigateTo} from './tpl'
export default {
props: ["res"],
data () {
return {
modelnavigateTo,
}
},
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
@import './advertising.scss';
</style>

89
pages/tabbar/home/template/tpl_integral.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<div class="layout">
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</div>
</div>
<div class="join-box">
<div class="join-item" v-for="item in 4" :key="item">
<div class="item-img-box">
<img
class="item-img"
src="https://picsum.photos/id/268/200/200"
alt
/>
</div>
<div class="item-price">
<span>20积分</span>
</div>
<div class="item-line-through">
<span>30积分</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["res"],
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.join-box {
display: flex;
}
.item-price {
> span {
font-size: 15px;
font-weight: 500;
color: #e1212b;
}
}
.join-item {
flex: 1;
}
.item-img {
width: 75px;
height: 75px;
margin: 0 auto;
display: block;
}
.item-img-box {
position: relative;
}
.item-line-through {
> span {
font-size: 10px;
font-weight: 400;
text-decoration: line-through;
color: #999;
}
}
.item-position-tips {
position: absolute;
right: 0;
color: #fff;
font-size: 12px;
bottom: 0;
}
.join-title {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
height: 50px;
> div:nth-of-type(1) {
font-size: 16px;
font-weight: bold;
}
> div:nth-of-type(2) {
font-size: 12px;
color: #999;
}
}
</style>

89
pages/tabbar/home/template/tpl_join_group.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<div class="layout">
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</div>
</div>
<div class="join-box">
<div class="join-item" v-for="item in 4" :key="item">
<div class="item-img-box">
<img
class="item-img"
src="https://picsum.photos/id/268/200/200"
alt
/>
<div class="item-position-tips">2人团</div>
</div>
<div class="item-price">
<span>￥120.00</span>
</div>
<div class="item-line-through">
<span>￥120.00</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["res"],
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.join-box {
display: flex;
}
.item-price {
> span {
font-size: 15px;
font-weight: 500;
color: #e1212b;
}
}
.join-item {
flex: 1;
}
.item-img {
width: 75px;
height: 75px;
margin: 0 auto;
display: block;
}
.item-img-box {
position: relative;
}
.item-line-through {
> span {
font-size: 10px;
font-weight: 400;
text-decoration: line-through;
color: #999;
}
}
.item-position-tips {
position: absolute;
right: 0;
color: #fff;
font-size: 12px;
bottom: 0;
}
.join-title {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
height: 50px;
> div:nth-of-type(1) {
font-size: 16px;
font-weight: bold;
}
> div:nth-of-type(2) {
font-size: 12px;
color: #999;
}
}
</style>

49
pages/tabbar/home/template/tpl_left_one_right_two.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div class="layout">
<div class="view-height-150" @click="modelnavigateTo(res.list[0])">
<u-image width="100%" height="300rpx" class="image-mode" :src="res.list[0].img" >
<u-loading slot="loading"></u-loading>
</u-image>
</div>
<div class="view-height-150">
<div class="view-height-75" @click="modelnavigateTo(res.list[1])">
<u-image width="100%" height="150rpx" class="image-mode" :src="res.list[1].img" alt >
<u-loading slot="loading"></u-loading>
</u-image>
</div>
<div class="view-height-75" @click="modelnavigateTo(res.list[2])">
<u-image width="100%" height="150rpx" class="image-mode" :src="res.list[2].img" alt >
<u-loading slot="loading"></u-loading>
</u-image>
</div>
</div>
</div>
</template>
<script>
import {modelnavigateTo} from './tpl'
export default {
title: "左一右二",
props: ["res"],
data () {
return {
modelnavigateTo,
}
},
mounted() {
}
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.layout {
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
</style>

44
pages/tabbar/home/template/tpl_left_two_right_one.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div class="layout ">
<div class="view-height-150">
<div class="view-height-75" @click="modelnavigateTo(res.list[0])">
<u-image class="image-mode" width="100%" height="150rpx" :src="res.list[0].img" ></u-image>
</div>
<div class="view-height-75" @click="modelnavigateTo(res.list[1])">
<u-image class="image-mode" width="100%" height="150rpx" :src="res.list[1].img" ></u-image>
</div>
</div>
<div class="view-height-150" @click="modelnavigateTo(res.list[2])">
<u-image class="image-mode" width="100%" height="300rpx" :src="res.list[2].img" ></u-image>
</div>
</div>
</template>
<script>
import {modelnavigateTo} from './tpl'
export default {
title: "左二右一",
props: ["res"],
data () {
return {
modelnavigateTo,
}
},
mounted() {
}
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.layout {
height: 167px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
</style>

54
pages/tabbar/home/template/tpl_menu.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<div class="layout">
<div class="menu-list">
<div class="menu-item" @click="modelnavigateTo(item)" v-for="(item, index) in res.list" :key="index">
<div>
<u-image
width="88rpx"
height="88rpx"
class="menu-img"
:src="item.img"
>
<u-loading slot="loading"></u-loading>
</u-image>
</div>
<div class="menu-title">{{ item.title }}</div>
</div>
</div>
</div>
</template>
<script>
import {modelnavigateTo} from './tpl'
export default {
props: ["res"],
data () {
return {
modelnavigateTo,
}
}
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.menu-list {
display: flex;
align-items: center;
flex-wrap: wrap;
> .menu-item {
text-align: center;
width: 20%;
// flex: 1;
margin: 20rpx 0;
}
}
.menu-img {
display: flex;
margin: 0 auto;
width: 88rpx;
height: 88rpx;
}
.menu-title {
font-size: 24rpx;
}
</style>

37
pages/tabbar/home/template/tpl_search.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<div class="layout">
<div class="search" @click="handleSearch">
<u-icon name="search"></u-icon>
{{ res.list[0].title }}
</div>
</div>
</template>
<script>
export default {
props: ["res"],
methods: {
handleSearch() {
uni.navigateTo({
url: "/pages/navigation/search/searchPage",
});
},
},
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.search {
height: 64rpx;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
background: #ededed;
}
.layout {
background: #fff;
padding: 0 16rpx;
}
</style>

39
pages/tabbar/home/template/tpl_spike.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div class="layout">
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</div>
</div>
<div class="join-box">
<div class="join-item" v-for="item in 4" :key="item">
<div class="item-img-box">
<img
class="item-img"
src="https://picsum.photos/id/268/200/200"
alt
/>
</div>
<div class="item-price">
<span>￥120.00</span>
</div>
<div class="item-line-through">
<span>￥190.00</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["res"],
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
@import './advertising.scss';
</style>

101
pages/tabbar/home/template/tpl_text_picture.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<div class="layout">
<div class="view-list">
<div class="view-item" @click="modelnavigateTo(res.list[0])">
<div class="-item-tilte">{{res.list[0].title}}</div>
<div class="-item-image">
<u-image width="120rpx" mode="scaleToFill" height="120rpx" :src="res.list[0].img" alt ></u-image>
</div>
</div>
<div class="view-item" @click="modelnavigateTo(res.list[1])">
<div class="-item-tilte">{{res.list[1].title}}</div>
<div class="-item-image">
<u-image width="120rpx" mode="scaleToFill" height="120rpx" :src="res.list[1].img" alt ></u-image>
</div>
</div>
</div>
<div class="view-list">
<div class="view-item" @click="modelnavigateTo(res.list[2])">
<div class="-item-tilte">{{res.list[2].title}}</div>
<div class="-item-image">
<u-image width="120rpx" mode="scaleToFill" height="120rpx" :src="res.list[2].img" alt ></u-image>
</div>
</div>
<div class="view-item" @click="modelnavigateTo(res.list[3])">
<div class="-item-tilte">{{res.list[3].title}}</div>
<div class="-item-image">
<u-image width="120rpx" mode="scaleToFill" height="120rpx" :src="res.list[3].img" alt ></u-image>
</div>
</div>
</div>
</div>
</template>
<script>
import {modelnavigateTo} from './tpl'
export default {
title: "文字图片模板",
props: ["res"],
data () {
return {
modelnavigateTo,
}
},
mounted() {
console.log(this.res);
}
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.layout {
display: flex;
background: #e8e8e8;
align-items: center;
justify-content: center;
background-size: cover;
padding: 0;
}
.-item-image{
padding: 10px ;
>img{
width: 100%;
}
}
.-item-tilte {
background: $aider-light-color;
height: 60rpx;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
}
.view-list {
width: 48%;
margin: 0 auto;
display: flex;
background: #fff;
border-top-left-radius: 0.8em;
border-top-right-radius: 0.8em;
border: 1px solid #ededed;
> .view-item {
width: 50%;
}
> .view-item:nth-of-type(1) {
> .-item-tilte {
border-top-left-radius: 0.8em;
}
}
> .view-item:nth-of-type(2) {
> .-item-tilte {
border-top-right-radius: 0.8em;
}
}
}
</style>

51
pages/tabbar/home/template/tpl_title.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div class="layout">
<div class="background">
<div class="title" :style="{ color: res.list[0].color }">
{{ res.list[0].title }}
</div>
</div>
</div>
</template>
<script>
export default {
title: "标题栏",
props: ["res"],
mounted() {
},
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.background {
background: url("/static/title.png") no-repeat;
position: absolute;
z-index: 2;
width: 100%;
height: 84rpx;
background-position-x: center;
background-position-y: center;
background-size: cover;
}
.layout {
text-align: center;
position: relative;
height: 84rpx;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
}
.title {
line-height: 84rpx;
font-size: 30rpx;
font-weight: bold;
}
</style>

72
pages/tabbar/home/template/tpl_top_one_bottom_two.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<div class="layout">
<div class="view-width-100" @click="modelnavigateTo(res.list[0])">
<u-image class="image-mode" width="100%" height="200rpx" :src="res.list[0].img">
<u-loading slot="loading"></u-loading>
</u-image>
</div>
<div class="view-width-100" @click="modelnavigateTo(res.list[1])">
<div class="view-height-85">
<u-image class="image-mode" width="100%" height="170rpx" :src="res.list[1].img">
<u-loading slot="loading"></u-loading>
</u-image>
</div>
<div class="view-height-85" @click="modelnavigateTo(res.list[2])">
<u-image class="image-mode" width="100%" height="170rpx" :src="res.list[2].img">
<u-loading slot="loading"></u-loading>
</u-image>
</div>
</div>
</div>
</template>
<script>
import { modelnavigateTo } from "./tpl";
export default {
title: "上一下二",
props: ["res"],
data() {
return {
modelnavigateTo,
};
},
mounted() {},
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.layout {
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
flex-direction: column;
}
// img {
// width: 100% !important;
// height: 85px !important;
// }
.view-width-100 {
padding: 1px 0;
display: flex;
height: 200rpx;
width: 100%;
> img {
width: 100%;
height: 100%;
}
}
.view-height-85 {
padding: 0 1px;
width: 50%;
> img {
width: 100%;
height: 100%;
}
}
.image-mode{
width: 100%;
}
</style>

79
pages/tabbar/home/template/tpl_top_two_bottom_one.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<div class="layout">
<div class="view-width-100">
<div class="view-height-85" @click="modelnavigateTo(res.list[0])">
<u-image
class="image-mode"
height="170rpx"
width="100%"
:src="res.list[0].img"
alt
><u-loading slot="loading"></u-loading
></u-image>
</div>
<div class="view-height-85" @click="modelnavigateTo(res.list[1])">
<u-image
class="image-mode"
height="170rpx"
width="100%"
:src="res.list[1].img"
alt
><u-loading slot="loading"></u-loading
></u-image>
</div>
</div>
<div class="view-width-100" @click="modelnavigateTo(res.list[2])">
<u-image
class="image-mode"
height="200rpx"
width="100%"
:src="res.list[2].img"
><u-loading slot="loading"></u-loading
></u-image>
</div>
</div>
</template>
<script>
import {modelnavigateTo} from './tpl'
export default {
title: "上二下一",
props: ["res"],
data () {
return {
modelnavigateTo,
}
},
mounted() {
},
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.layout {
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
// height: 260rpx;
flex-direction: column;
}
// img {
// width: 100% !important;
// height: 85px !important;
// }
.view-width-100 {
padding: 1px 0;
display: flex;
height: 200rpx;
width: 100%;
}
.view-height-85 {
padding: 0 1px;
width: 50%;
}
.image-mode{
width: 100%;
}
</style>

17
pages/tabbar/home/template/tpl_view_list.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div class="layout">请选择风格</div>
</template>
<script>
export default {
destroyed(){
}
}
</script>
<style scoped lang="scss">
@import './tpl.scss';
.layout{
height: 100px;
}
</style>