优化楼层装修 新增直播模板
lemon橪
parent
3d74e3d907
commit
23cc635971
|
|
@ -446,6 +446,13 @@
|
|||
"navigationBarTitleText": "人气推荐",
|
||||
"navigationStyle": "custom"
|
||||
|
||||
}
|
||||
},{
|
||||
"path": "lives",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -21,18 +21,17 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {modelNavigateTo} from './tpl'
|
||||
|
||||
import { modelNavigateTo } from "./tpl";
|
||||
export default {
|
||||
title: "左一右二",
|
||||
props: ["res"],
|
||||
data() {
|
||||
return {
|
||||
modelNavigateTo,
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -44,5 +43,4 @@ export default {
|
|||
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue