zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化楼层装修 新增直播模板

master
lemon橪 2021-05-27 16:24:44 +08:00
parent 3d74e3d907
commit 23cc635971
11 changed files with 245 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages.json
View File

@ -446,6 +446,13 @@
"navigationBarTitleText": "人气推荐",
"navigationStyle": "custom"
}
},{
"path": "lives",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
}
}

219
pages/promotion/lives.vue Normal file
View File

@ -0,0 +1,219 @@
<template>
<div class="box">
<u-navbar class="navbar">
<view class="slot-wrap">
<u-search placeholder="搜索直播间" v-model="keyword"></u-search>
</view>
</u-navbar>
<!-- 轮播图 -->
<u-swiper class="swiper" :effect3d="true" :list="swiperImg">
</u-swiper>
<u-tabs :is-scroll="false" :active-color="activeColor" inactive-color="#606266" ref="tabs" :list="tabs"></u-tabs>
<div class="wrapper">
<!-- 直播中 全部 直播回放 -->
<div class="live-list">
<div class="live-cover-img">
<div class="tips">
<div class="live-box">
<image class="live-gif" src="./static/live.gif"></image>
</div>
<span> 直播中</span>
</div>
<div class="bg"></div>
<image class="zan" src="./static/zan.gif" mode="" />
<u-image width="326" height="354" src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/fe5b8167b0264c53836d08a6a7003cf0.jpeg" />
</div>
<div class="live-goods">
<image src="./static/live.png" class="live-icon" mode="" />
<div class="live-goods-name">
甄选家电好物，尽在超值5月
</div>
<div class="live-store">
<u-image shape="circle" width="50" height="50" src="https://gfs14.gomein.net.cn/T11wElB7Cv1RCvBVdK_360.jpg?v=1" />
<span class="wes">lilishop</span>
</div>
<div class="live-goods-list">
<div class="live-goods-item">
<u-image border-radius="20" height="140"></u-image>
</div>
<div class="live-goods-item">
<u-image border-radius="20" height="140"></u-image>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeColor: this.$lightColor,
// 标签栏
tabs: [
{
name: "直播中",
},
{
name: "全部",
},
{
name: "回放",
},
],
// 导航栏的配置
background: {
background: "#ff9f28",
},
//轮播图滚动的图片
swiperImg: [
{
image:
"https://lilishop-oss.oss-cn-beijing.aliyuncs.com/8e33ab68ef734558bdc158d6b1b1451f.png",
},
{
image:
"https://lilishop-oss.oss-cn-beijing.aliyuncs.com/5ec999c942374e849d085071b4d20a19.jpeg",
},
{
image:
"https://lilishop-oss.oss-cn-beijing.aliyuncs.com/48d789cb9c864b7b87c1c0f70996c3e8.jpeg",
},
],
};
},
};
</script>
<style lang="scss" scoped>
.slot-wrap {
display: flex;
align-items: center;
/* 如果您想让slot内容占满整个导航栏的宽度 */
flex: 1;
/* 如果您想让slot内容与导航栏左右有空隙 */
/* padding: 0 30rpx; */
}
.wrapper {
padding: 0 24rpx;
}
.live-list {
display: flex;
overflow: hidden;
border-radius: 20rpx;
flex-wrap: wrap;
background: #fff;
margin: 20rpx 0;
}
.live-cover-img {
position: relative;
}
.live-goods {
position: relative;
flex: 1;
padding: 16rpx 24rpx 24rpx;
}
.live-goods-name {
height: 84rpx;
font-weight: bold;
font-size: 30rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.live-store {
display: flex;
align-items: center;
margin: 20rpx 0;
overflow: hidden;
width: calc(100% - 50rpx);
> span {
color: #999;
margin-left: 20rpx;
}
}
.live-gif {
width: 20rpx;
height: 20rpx;
}
.live-box {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 40rpx;
margin-right: 10rpx;
height: 40rpx;
background: linear-gradient(90deg, #ff6b35, #ff9f28, #ffcc03);
}
.live-goods-list {
display: flex;
align-items: center;
justify-content: space-between;
> .live-goods-item {
flex: 1;
}
> .live-goods-item:nth-of-type(1) {
padding-right: 38rpx;
}
}
.live-icon,
.zan {
position: absolute;
width: 80rpx;
height: 80rpx;
z-index: 9;
}
.tips {
display: flex;
position: absolute;
z-index: 9;
align-items: center;
top: 20rpx;
right: 0;
padding: 4rpx 12rpx 4rpx 0;
font-size: 24rpx;
border-radius: 100px;
color: #fff;
background: rgba(0, 0, 0, 0.46);
}
.live-icon {
right: 0;
top: 104rpx;
}
.zan {
bottom: 0;
right: 0;
width: 100rpx;
height: 100rpx;
}
.bg {
position: absolute;
bottom: 4rpx;
width: 100%;
height: 100rpx;
z-index: 8;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
from(rgba(0, 0, 0, 0.25)),
color-stop(82%, transparent)
);
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.25), transparent 82%);
border-bottom-left-radius: 20rpx;
}
</style>

BIN
pages/promotion/static/live.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
pages/promotion/static/live.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
pages/promotion/static/zan.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

2
pages/tabbar/home/template/tpl_flex_five.vue
View File

@ -1,7 +1,7 @@
<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-image width="140rpx" mode="aspectFit" 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>

4
pages/tabbar/home/template/tpl_flex_four.vue
View File

@ -1,7 +1,7 @@
<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-image height="175rpx" mode="aspectFit" 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>
@ -23,7 +23,7 @@ export default {
<style lang="scss" scoped>
@import "./tpl.scss";
.layout {
height: 84px;
display: flex;
align-items: center;
justify-content: center;

3
pages/tabbar/home/template/tpl_flex_three.vue
View File

@ -26,7 +26,8 @@ export default {
<style lang="scss" scoped>
@import "./tpl.scss";
.layout {
height: 110px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;

18
pages/tabbar/home/template/tpl_left_one_right_two.vue
View File

@ -2,18 +2,18 @@
<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-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-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-image width="100%" height="150rpx" class="image-mode" :src="res.list[2].img" alt>
<u-loading slot="loading"></u-loading>
</u-image>
</div>
@ -21,18 +21,17 @@
</div>
</template>
<script>
import {modelNavigateTo} from './tpl'
import { modelNavigateTo } from "./tpl";
export default {
title: "左一右二",
props: ["res"],
data () {
data() {
return {
modelNavigateTo,
}
};
},
mounted() {
}
mounted() {},
};
</script>
<style lang="scss" scoped>
@ -44,5 +43,4 @@ export default {
background-size: cover;
}
</style>