8 changed files with 788 additions and 4 deletions
-
3common/api.js
-
10common/styles/iconfont.css
-
217components/lf-nav/lf-nav.vue
-
12pages.json
-
1pages/index/index.vue
-
110pages/search/search.vue
-
434pages/search/searchList.vue
-
5uview-ui/components/u-tabs/u-tabs.vue
@ -0,0 +1,217 @@ |
|||
<template> |
|||
<view> |
|||
<view :style="{marginBottom: spreadOut ? headHeight + 'px' : '0px'}"> |
|||
<view :class="{head: true, 'border-b': boderBottom}" :style="{height: headHeight + 'px', background: bgColor}"> |
|||
<block v-if="diy"> |
|||
<view class="diy-head" :style="{'top': headHeight - 38 + 'px'}"> |
|||
<slot></slot> |
|||
</view> |
|||
</block> |
|||
<block v-else> |
|||
<view class="head-nav" :style="{'top': headHeight - 40 + 'px'}" v-if="showIcon"> |
|||
<text class="lf-iconfont icon-daifukuan font-40size" @click="clickDropOut"></text> |
|||
<text class="lf-iconfont icon-sousuo font-40size" @click="clickHome"></text> |
|||
</view> |
|||
<view class="title-box" :style="{'margin': headHeight - 36 + 'px auto 0'}" @click="goSearch()"> |
|||
<view v-if="search" class="search-father"> |
|||
<u-icon name="search" class="search-icon" style="color: #777;"></u-icon> |
|||
<input class="search" placeholder-style="color: #777" placeholder="搜你想要的" confirm-type="search" v-model="value" @confirm="onSearch"/> |
|||
</view> |
|||
<text class="font-30size" :style="{color: titleColor}" v-else>{{ title }}</text> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
title: { |
|||
type: String, // 标题 |
|||
default: '' |
|||
}, |
|||
showIcon: { |
|||
type: Boolean, // 是否显示左侧操作菜单 |
|||
default: false |
|||
}, |
|||
bgColor: { |
|||
type: String, // head背景颜色 |
|||
default: '#f8f8f8' |
|||
}, |
|||
titleColor: { |
|||
type: String, // 标题字体颜色 |
|||
default: '#1d1d1d' |
|||
}, |
|||
spreadOut: { |
|||
type: Boolean, // 内容是否自动撑开，该组件悬浮了，原有的dom不再占用位置，如果需要占用值为true |
|||
default: true |
|||
}, |
|||
search: { |
|||
type: Boolean, // 是否显示搜索输入框 |
|||
default: false |
|||
}, |
|||
diy: { |
|||
type: Boolean, // 自定义内容，开启后title，showIcon，search均都不生效 |
|||
default: false |
|||
}, |
|||
backInquiry: { |
|||
type: Boolean, // 点击返回按钮后是否弹出询问弹窗，showIcon为true时生效 |
|||
default: false |
|||
}, |
|||
boderBottom: { |
|||
type: Boolean, // 是否显示底部边框线 |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
headHeight: 66, // 头部导航高度 |
|||
value: '' |
|||
}; |
|||
}, |
|||
created(){ |
|||
this.getSystemInfo(); |
|||
}, |
|||
methods: { |
|||
goSearch() { |
|||
console.log(1) |
|||
uni.redirectTo({ |
|||
url: '/pages/search/search' |
|||
}) |
|||
}, |
|||
// 获取手机高度 |
|||
getSystemInfo(){ |
|||
let result = uni.getSystemInfoSync(); |
|||
this.headHeight = result.statusBarHeight + 46; |
|||
this.$emit('changeHeight', this.headHeight); |
|||
}, |
|||
// 监听返回 |
|||
clickDropOut(event){ |
|||
if(this.backInquiry){ |
|||
uni.showModal({ |
|||
title: '温馨提示', |
|||
content: '确定离开此页面吗？', |
|||
success: result => { |
|||
if(result.confirm){ |
|||
this.$back(); |
|||
} |
|||
} |
|||
}) |
|||
}else{ |
|||
this.$back(); |
|||
} |
|||
}, |
|||
$back(){ |
|||
// #ifdef H5 |
|||
let pages = getCurrentPages(); |
|||
if(pages.length <= 1){ |
|||
uni.redirectTo({ |
|||
url: '/pages/index/index/index' |
|||
}) |
|||
return; |
|||
} |
|||
// #endif |
|||
uni.navigateBack(); |
|||
}, |
|||
// 监听回到首页 |
|||
clickHome(){ |
|||
uni.reLaunch({ |
|||
url: '/pages/index/index/index' |
|||
}) |
|||
}, |
|||
// 搜索 |
|||
onSearch(event){ |
|||
this.$emit('search', event.detail.value); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.search-father { |
|||
display: flex; |
|||
position: relative; |
|||
} |
|||
.font-40size{ |
|||
font-size: 40rpx; |
|||
} |
|||
.font-30size{ |
|||
font-size: 30rpx; |
|||
} |
|||
.border-b{ |
|||
border-bottom: 1rpx solid #e5e5e5; |
|||
} |
|||
.head{ |
|||
width: 100vw; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 99999; |
|||
transition: all .2; |
|||
} |
|||
.head .head-nav{ |
|||
position: absolute; |
|||
left: 2vw; |
|||
cursor: pointer; |
|||
width: 130rpx; |
|||
background-color: #FFFFFF; |
|||
border: 1rpx solid #dcd3d5; |
|||
border-radius: 30rpx; |
|||
height: 60rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 12rpx; |
|||
} |
|||
.head .head-nav::after{ |
|||
position: absolute; |
|||
content: ''; |
|||
width: 2rpx; |
|||
height: 40rpx; |
|||
background-color: #f7f7f7; |
|||
left: 50%; |
|||
top: calc(50% - 20rpx); |
|||
} |
|||
.title-box{ |
|||
max-width: 49%; |
|||
height: 50rpx; |
|||
text-align: center; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
.search{ |
|||
width: 344rpx; |
|||
height: 50rpx; |
|||
background-color: rgba(255,255,255,0.5); |
|||
color: #777; |
|||
border-radius: 30rpx; |
|||
margin: 0 auto; |
|||
text-align: left; |
|||
box-sizing: border-box; |
|||
padding: 0 50rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
/deep/.input-placeholder{ |
|||
color: #777; |
|||
font-size: 40rpx!important; |
|||
} |
|||
|
|||
.search-icon { |
|||
position: absolute; |
|||
left: 24rpx; |
|||
top: 12rpx; |
|||
} |
|||
|
|||
.diy-head{ |
|||
position: absolute; |
|||
left: 2vw; |
|||
max-width: 70%; |
|||
height: 50rpx; |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,110 @@ |
|||
<template> |
|||
<view> |
|||
<view class="lf-p-t-30 lf-p-r-30 lf-flex lf-w-100 lf-bg-white"> |
|||
<u-icon name="search" class="search-icon"></u-icon> |
|||
<input class="rom-search" type="text" v-model="searchContent" @confirm="setSearch()" placeholder="请输入商品名称"/> |
|||
</view> |
|||
<view class="history-card" v-if="historySearch != ''"> |
|||
<view class="lf-font-28 lf-color-gray lf-p-b-30 lf-p-l-30"> |
|||
历史搜索 |
|||
</view> |
|||
<view class="lf-flex lf-flex-wrap lf-p-l-20 lf-p-r-20"> |
|||
<view class="search-tag" v-for="i of historySearch" @click="gosearch(i)">{{i}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="history-card" v-else> |
|||
<view class="lf-font-28 lf-color-gray lf-p-b-30 lf-p-l-30"> |
|||
历史搜索 |
|||
</view> |
|||
<view class="lf-flex lf-flex-wrap lf-p-l-30 lf-p-r-20"> |
|||
暂无历史搜索记录 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
let list = [] |
|||
export default { |
|||
data() { |
|||
return { |
|||
historySearch: [], |
|||
searchContent: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
gosearch(i) { |
|||
uni.navigateTo({ |
|||
url: '/pages/search/searchList?serach_content=' + i |
|||
}) |
|||
}, |
|||
setSearch() { |
|||
console.log(this.searchContent) |
|||
// let list = []; |
|||
list.push(this.searchContent) |
|||
uni.navigateTo({ |
|||
url: '/pages/search/searchList?serach_content=' + this.searchContent |
|||
}) |
|||
setTimeout(() => { |
|||
this.historySearch = list |
|||
uni.setStorageSync('historySearch',this.historySearch) |
|||
},1000) |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.historySearch = uni.getStorageSync('historySearch') || []; |
|||
console.log('初始',this.historySearch) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background-color: #F8F8F8; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.history-card { |
|||
background-color: white; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 30rpx 0; |
|||
} |
|||
.search-tag { |
|||
padding: 10rpx 20rpx; |
|||
border-radius: 30rpx; |
|||
background: #f5f5f5; |
|||
color: #222; |
|||
display: flex; |
|||
align-items: center; |
|||
text-align: center; |
|||
width: max-content; |
|||
height: max-content; |
|||
font-size: 28rpx; |
|||
margin-right: 20rpx; |
|||
&:nth-child(5n) { |
|||
margin-right: 0; |
|||
} |
|||
&:nth-child(n + 6) { |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
.search-icon { |
|||
position: relative; |
|||
bottom: 0; |
|||
left: 54rpx; |
|||
} |
|||
/deep/.input-placeholder{ |
|||
color: #777; |
|||
font-size: 28rpx; |
|||
} |
|||
.rom-search { |
|||
width: 686rpx; |
|||
height: 60rpx; |
|||
background: #f5f5f5; |
|||
border-radius: 30rpx; |
|||
padding-left: 74rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,434 @@ |
|||
<template> |
|||
<view> |
|||
<view class="lf-p-t-30 lf-p-b-30"> |
|||
<view class="lf-m-b-30 lf-flex lf-w-100"> |
|||
<u-icon name="search" class="search-icon"></u-icon> |
|||
<input class="rom-search" type="text" placeholder="请输入商品名称" @confirm="startSearch()" v-model="search_content" /> |
|||
</view> |
|||
<view class="special_tab"> |
|||
<u-tabs :list="tab_list" active-color="#1998FE" inactive-color='#777777' :is-scroll="true" @click="clicksort" :current="current" @change="tabChange"></u-tabs> |
|||
<view style="position: absolute;right: 30rpx;top: 132rpx;display: flex;flex-direction: column;"> |
|||
<u-icon name="arrow-up" :class="sort==0?'':'lf-color-blue'"></u-icon> |
|||
<u-icon name="arrow-down" :class="sort==0?'lf-color-blue':''"></u-icon> |
|||
</view> |
|||
</view> |
|||
<swiper :style="{height: '800rpx', width: '750rpx'}" :current="current" @change="swiperChange"> |
|||
<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex"> |
|||
<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh"> |
|||
<view class="lf-m-t-20"></view> |
|||
<view> |
|||
<!-- 活动列表 --> |
|||
<view class="content"> |
|||
<view class="item" v-for="(item,index) of tabItem.list" :key="index" @click="$url('/pages/goodsDetail/index?goods_id='+item.id)"> |
|||
<view class="cover"> |
|||
<image :src="item.picture" class="lf-w-100 lf-h-100" mode="aspectFill"></image> |
|||
</view> |
|||
<view style="width: 420rpx;"> |
|||
<view class="lf-font-28 lf-color-333 lf-line-2">{{item.title}}</view> |
|||
<view class="lf-font-24 lf-color-gray lf-line-2 lf-m-t-10" style="min-height: 64rpx;">本套票只包含两个成人不可带小孩本套票只包含两个成人不可带小孩本套票只包含两个成人不可带小孩</view> |
|||
<view class="lf-flex lf-m-t-25"> |
|||
<lf-price :price="item.price"></lf-price> |
|||
<text class="lf-font-24 lf-color-gray lf-line-through lf-m-l-15">¥{{item.original_price}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 加载 --> |
|||
<view class="loading-more"> |
|||
<text v-if="tabItem.list.length" :class="{'loading-more-text': loadingClass}">{{ loadingText }}</text> |
|||
<lf-nocontent v-else></lf-nocontent> |
|||
</view> |
|||
<!-- 回到顶部 --> |
|||
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top> |
|||
</view> |
|||
</scroll-view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
search_content: '', |
|||
tab_list: [ |
|||
{ |
|||
id: 1, |
|||
name: '综合', |
|||
list: [], |
|||
isRefresher: false, |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '销量', |
|||
list: [], |
|||
isRefresher: false, |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '上新', |
|||
list: [], |
|||
isRefresher: false, |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
}, |
|||
{ |
|||
id: 4, |
|||
name: '价格', |
|||
list: [], |
|||
isRefresher: false, |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
}, |
|||
], |
|||
current: 0, |
|||
windowHeight: 0, |
|||
list: [], |
|||
loadingClass: false, |
|||
loadingText: '已加载全部数据~', |
|||
page: 1, |
|||
isPage: true, |
|||
pageSize: 20, |
|||
isRefresher: false, |
|||
sort: 0, |
|||
} |
|||
}, |
|||
methods: { |
|||
changeSort(sort) { |
|||
console.log('排序') |
|||
this.sort != this.sort |
|||
this.getActivityList() |
|||
}, |
|||
// scroll-view 下拉刷新 |
|||
onRefresherrefresh(){ |
|||
this.tab_list[this.current].isRefresher = true; |
|||
this.$u.throttle(() => { |
|||
this.getActivityList(); |
|||
}, 200); |
|||
}, |
|||
// 页面触底，加载下一页 |
|||
onScrolltolower(){ |
|||
let tab_item = this.tab_list[this.current]; |
|||
if(tab_item.isPage){ |
|||
tab_item.page = tab_item.page + 1; |
|||
this.getActivityList(); |
|||
} |
|||
}, |
|||
getActivityList(){ |
|||
let tab_item = this.tab_list[this.current]; |
|||
this.$http(this.API.API_SEARCH_GOODS,{keywords:this.search_content,type:this.current,by: this.sort}).then(res => { |
|||
let isPage = res.data.prev_page_url == null?false:true; |
|||
tab_item.isPage = isPage; |
|||
if(!isPage){ |
|||
tab_item.loadingClass = false; |
|||
tab_item.loadingText = '没有更多数据啦~'; |
|||
} |
|||
tab_item.isRefresher = false; |
|||
if(tab_item.page == 1){ |
|||
tab_item.list = res.data.data; |
|||
}else{ |
|||
tab_item.list.push(...res.data.data); |
|||
} |
|||
}) |
|||
}, |
|||
clicksort(index) { |
|||
if(index == 3) { |
|||
if(this.sort == 0) { |
|||
this.sort = 1 |
|||
}else { |
|||
this.sort = 0 |
|||
} |
|||
this.getActivityList() |
|||
}else { |
|||
return |
|||
} |
|||
}, |
|||
tabChange(index){ |
|||
this.current = index; |
|||
console.log('重复只想') |
|||
this.getActivityList() |
|||
}, |
|||
// 滑块下标值变化 |
|||
swiperChange(event){ |
|||
this.current = event.detail.current; |
|||
if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理 |
|||
}, |
|||
startSearch() { |
|||
console.log('当前值',this.search_content) |
|||
this.getActivityList() |
|||
}, |
|||
|
|||
}, |
|||
onShow(){ |
|||
this.windowHeight = getApp().globalData.windowHeight; |
|||
}, |
|||
onLoad(e) { |
|||
this.search_content = e.serach_content |
|||
if(this.search_content) { |
|||
this.getActivityList() |
|||
} |
|||
console.log('传来的搜索',e) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content{ |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
width: 750rpx; |
|||
height: max-content; |
|||
.item{ |
|||
width: 100%; |
|||
height: auto; |
|||
border-bottom: 1rpx solid #E5E5E5; |
|||
padding: 30rpx 0; |
|||
display: flex; |
|||
&:last-child{ |
|||
border-bottom: none; |
|||
} |
|||
.cover{ |
|||
width: 250rpx; |
|||
height: 210rpx; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
margin-right: 15rpx; |
|||
} |
|||
} |
|||
} |
|||
.search-icon { |
|||
position: relative; |
|||
bottom: 0; |
|||
left: 54rpx; |
|||
} |
|||
/deep/.input-placeholder{ |
|||
color: #777; |
|||
font-size: 28rpx; |
|||
} |
|||
.rom-search { |
|||
width: 686rpx; |
|||
height: 60rpx; |
|||
background: #f5f5f5; |
|||
border-radius: 30rpx; |
|||
padding-left: 74rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
.goods-rom { |
|||
border-radius: 20rpx; |
|||
width: 333rpx; |
|||
height: 497rpx; |
|||
background-color: white; |
|||
box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
&:nth-child(2n) { |
|||
margin-right: 0; |
|||
} |
|||
&:nth-child(n + 3) { |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
.introduct { |
|||
padding: 0 0 30rpx 32rpx; |
|||
} |
|||
.com{ |
|||
width: 100%; |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
padding: 0rpx 28rpx; |
|||
} |
|||
.shop-head { |
|||
width: 100%; |
|||
height: 400rpx; |
|||
position: relative; |
|||
} |
|||
.shop-flex { |
|||
display: flex; |
|||
padding: 30rpx; |
|||
} |
|||
.shop-title { |
|||
width: 686rpx; |
|||
height: 274rpx; |
|||
border-radius: 20rpx; |
|||
background-color: white; |
|||
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
margin: 0 auto; |
|||
position: relative; |
|||
top: -32rpx; |
|||
} |
|||
.shop-img { |
|||
width: 90rpx; |
|||
height: 90rpx; |
|||
margin-right: 15rpx; |
|||
} |
|||
.shop-function { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
font-size: 40rpx; |
|||
} |
|||
.function-total { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0 65rpx 0 65rpx; |
|||
} |
|||
|
|||
/deep/.u-scroll-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
/deep/.u-scroll-box .u-tab-bar { |
|||
background-color: #1998FE!important; |
|||
width: 80rpx!important; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -12rpx; |
|||
} |
|||
|
|||
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar { |
|||
background-color: #1998FE!important; |
|||
width: 56rpx!important; |
|||
position: absolute; |
|||
height: 5rpx!important; |
|||
left: 8rpx; |
|||
bottom: -4rpx; |
|||
} |
|||
|
|||
/deep/ .u-tab-item { |
|||
font-size: 28rpx!important; |
|||
} |
|||
|
|||
|
|||
//价格筛选伪类 |
|||
// /deep/.special_tab .u-tab-item:nth-child(4n) ::after{ |
|||
// font-size: 48rpx!important; |
|||
// content: ''; |
|||
|
|||
// color: red; |
|||
// } |
|||
|
|||
// loading加载 |
|||
.loading-more { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding-top: 10px; |
|||
padding-bottom: 10px; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
.loading-more-text::before { |
|||
content: ''; |
|||
width: 20px; |
|||
height: 20px; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
-webkit-animation: weuiLoading 1s steps(12, end) infinite; |
|||
animation: weuiLoading 1s steps(12, end) infinite; |
|||
background-repeat: no-repeat; |
|||
background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E"); |
|||
background-size: 100%; |
|||
} |
|||
@keyframes weuiLoading { |
|||
0% { |
|||
transform: rotate3d(0, 0, 1, 0deg); |
|||
} |
|||
100% { |
|||
transform: rotate3d(0, 0, 1, 360deg); |
|||
} |
|||
} |
|||
|
|||
|
|||
.list-warter { |
|||
border-radius: 20rpx; |
|||
margin: 10px 5px; |
|||
margin-top: 0px; |
|||
background-color: #ffffff; |
|||
// padding: 8px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.u-close { |
|||
position: absolute; |
|||
top: 32rpx; |
|||
right: 32rpx; |
|||
} |
|||
|
|||
.list-image { |
|||
width: 100%; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.list-title { |
|||
font-size: 28rpx; |
|||
// font-weight: bold; |
|||
color: $u-main-color; |
|||
} |
|||
|
|||
.list-label{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
background-color: rgba(0,0,0,0.5); |
|||
width: 140rpx; |
|||
height: 48rpx; |
|||
border-radius: 20rpx 0rpx 0rpx 0rpx; |
|||
font-size: 22rpx; |
|||
color: #FFFFFF; |
|||
line-height: 48rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.list-tag { |
|||
display: flex; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.list-tag-owner { |
|||
background-color: $u-type-error; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 4rpx 14rpx; |
|||
border-radius: 50rpx; |
|||
font-size: 20rpx; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.list-tag-text { |
|||
border: 1px solid $u-type-primary; |
|||
color: $u-type-primary; |
|||
margin-left: 10px; |
|||
border-radius: 50rpx; |
|||
line-height: 1; |
|||
padding: 4rpx 14rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
border-radius: 50rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.list-price { |
|||
font-size: 30rpx; |
|||
color: $u-type-error; |
|||
margin-top: 5px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue