mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-19 09:25:53 +08:00
commit message
This commit is contained in:
Chopper
323
buyer/src/components/drawer/Drawer.vue
Normal file
323
buyer/src/components/drawer/Drawer.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div class="content-drawer">
|
||||
<div v-if="title === '购物车'" class="cart-con">
|
||||
<ul>
|
||||
<li v-for="(goods,goodsIndex) in cartList" :key="goodsIndex">
|
||||
<div>
|
||||
<img :src="goods.goodsSku.thumbnail" width="90" height="90" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<p class="hover-color" @click="linkTo(`/goodsDetail?skuId=${goods.goodsSku.id}&goodsId=${goods.goodsSku.goodsId}`)">{{goods.goodsSku.goodsName}}</p>
|
||||
<p class="price">{{goods.goodsSku.price | unitPrice('￥')}}<span> x{{goods.num}}</span></p>
|
||||
</div>
|
||||
<span class="del hover-color" @click="delGoods(goods.goodsSku.id)">删除</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Button size="large" class="mt_10" type="primary" @click="linkTo('/cart')" long>去购物车结算</Button>
|
||||
</div>
|
||||
|
||||
<div v-else-if="title === '我的订单'" class="order-con">
|
||||
<ul>
|
||||
<li v-for="(order,orderIndex) in orderList" :key="orderIndex">
|
||||
<div class="order-status"><span>{{filterOrderStatus(order.orderStatus)}}</span><span>{{order.createTime}}</span></div>
|
||||
<div class="goods-img">
|
||||
<img :src="img.image"
|
||||
@click="linkTo(`/goodsDetail?skuId=${img.skuId}&goodsId=${img.goodsId}`)"
|
||||
v-for="(img,imgIndex) in order.orderItems"
|
||||
:key="imgIndex" width="40" height="40" alt="">
|
||||
</div>
|
||||
<div class="order-handle"><span>{{ order.flowPrice | unitPrice("￥") }}</span><span class="hover-color" @click="linkTo(`home/OrderDetail?sn=${order.sn}`)">查看订单</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
<Button type="primary" @click="linkTo('/home/MyOrder')" long>查看全部订单</Button>
|
||||
</div>
|
||||
|
||||
<div v-else-if="title === '优惠券'" class="coupon-con">
|
||||
<ul class="coupon-list">
|
||||
<li v-for="(coupon, index) in couponList" class="coupon-item" :key="index">
|
||||
<div class="c-left">
|
||||
<div>
|
||||
<span v-if="coupon.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{coupon.price | unitPrice}}</span></span>
|
||||
<span v-if="coupon.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{coupon.discount}}</span>折</span>
|
||||
<span class="describe">满{{coupon.consumeThreshold}}元可用</span>
|
||||
</div>
|
||||
<p>使用范围：{{useScope(coupon.scopeType, coupon.storeName)}}</p>
|
||||
<p>有效期：{{coupon.endTime}}</p>
|
||||
</div>
|
||||
<b></b>
|
||||
<a class="c-right" @click="receive(coupon)">立即领取</a>
|
||||
<i class="circle-top"></i>
|
||||
<i class="circle-bottom"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-else-if="title === '我的足迹'" class="tracks-con">
|
||||
<ul>
|
||||
<li v-for="(track,trackIndex) in tracksList" :key="trackIndex">
|
||||
<img :src="track.thumbnail" :alt="track.thumbnail" @click="linkTo(`/goodsDetail?skuId=${track.id}&goodsId=${track.goodsId}`)" width="100" height="100">
|
||||
<div @click="addToCart(track.id)">加入购物车</div>
|
||||
<p class="global_color">{{track.price | unitPrice('￥')}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="hover-color" style="text-align:center;" @click="linkTo('/home/MyTracks')">查看更多>></div>
|
||||
</div>
|
||||
<div v-else-if="title === '我的收藏'" class="collect-con">
|
||||
<ul>
|
||||
<li v-for="(collect,collectIndex) in collectList" :key="collectIndex">
|
||||
<img :src="collect.image" :alt="collect.image" @click="linkTo(`/goodsDetail?skuId=${collect.skuId}&goodsId=${collect.goodsId}`)" width="100" height="100">
|
||||
<div @click="addToCart(collect.skuId)">加入购物车</div>
|
||||
<span class="del-icon" @click.stop="cancelCollect(collect.skuId)">
|
||||
<Icon type="md-trash" />
|
||||
</span>
|
||||
<p class="global_color">{{collect.price | unitPrice('￥')}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="hover-color" style="text-align:center;" @click="linkTo('/home/Favorites')">查看更多>></div>
|
||||
</div>
|
||||
<Spin v-if="loading" fix></Spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {cartGoodsAll, delCartGoods, addCartGoods, cartCount} from '@/api/cart.js'
|
||||
import { getOrderList } from '@/api/order';
|
||||
import {couponList, receiveCoupon, tracksList, collectList, cancelCollect} from '@/api/member.js'
|
||||
export default {
|
||||
name: 'Drawer',
|
||||
props: {
|
||||
title: {
|
||||
default: '',
|
||||
type: String
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
title (val) {
|
||||
switch (val) {
|
||||
case '购物车':
|
||||
this.getCartList()
|
||||
break;
|
||||
case '我的订单':
|
||||
this.getOrderList()
|
||||
break;
|
||||
case '我的足迹':
|
||||
this.getTracksList()
|
||||
break;
|
||||
case '优惠券':
|
||||
this.getCouponList()
|
||||
break;
|
||||
case '我的收藏':
|
||||
this.getCollectList()
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false, // 控制spin显隐
|
||||
cartList: [], // 购物车列表
|
||||
couponList: [], // 优惠券列表
|
||||
orderList: [], // 订单列表
|
||||
collectList: [], // 收藏列表
|
||||
tracksList: [], // 足迹列表
|
||||
orderStatusList: [ // 订单状态
|
||||
{
|
||||
name: '未付款',
|
||||
status: 'UNPAID'
|
||||
},
|
||||
{
|
||||
name: '已付款',
|
||||
status: 'PAID'
|
||||
},
|
||||
{
|
||||
name: '待发货',
|
||||
status: 'UNDELIVERED'
|
||||
},
|
||||
{
|
||||
name: '已发货',
|
||||
status: 'DELIVERED'
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
status: 'COMPLETED'
|
||||
},
|
||||
{
|
||||
name: '待核验',
|
||||
status: 'TAKE'
|
||||
},
|
||||
{
|
||||
name: '已取消',
|
||||
status: 'CANCELLED'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
mounted () {},
|
||||
methods: {
|
||||
getCartList () { // 获取购物车列表
|
||||
this.loading = true
|
||||
cartGoodsAll().then(res => {
|
||||
this.loading = false
|
||||
this.cartList = res.result.skuList
|
||||
})
|
||||
},
|
||||
// 删除商品
|
||||
delGoods (id) {
|
||||
delCartGoods({ skuIds: id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('删除成功');
|
||||
this.getCartList();
|
||||
cartCount().then(res => {
|
||||
this.$store.commit('SET_CARTNUM', res.result)
|
||||
this.Cookies.setItem('cartNum', res.result)
|
||||
})
|
||||
} else {
|
||||
this.$Message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
filterOrderStatus (status) { // 获取订单状态中文
|
||||
const ob = this.orderStatusList.filter(e => { return e.status === status });
|
||||
return ob[0].name
|
||||
},
|
||||
receive (item) { // 领取优惠券
|
||||
receiveCoupon(item.id).then(res => {
|
||||
if (res.success) {
|
||||
this.$Modal.confirm({
|
||||
title: '领取优惠券',
|
||||
content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
|
||||
okText: '我的优惠券',
|
||||
cancelText: '立即使用',
|
||||
onOk: () => {
|
||||
this.$router.push('/home/Coupons')
|
||||
},
|
||||
onCancel: () => {
|
||||
if (item.storeId !== 'platform') {
|
||||
this.$router.push({path: '/merchant', query: {id: item.storeId}})
|
||||
} else {
|
||||
if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
|
||||
this.$router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
|
||||
} else {
|
||||
this.$router.push({path: '/goodsList'})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
useScope (type, storeName) { // 判断优惠券使用范围
|
||||
let shop = '平台';
|
||||
let goods = '全部商品'
|
||||
if (storeName !== 'platform') shop = storeName
|
||||
switch (type) {
|
||||
case 'ALL':
|
||||
goods = '全部商品'
|
||||
break;
|
||||
case 'PORTION_GOODS':
|
||||
goods = '部分商品'
|
||||
break;
|
||||
case 'PORTION_GOODS_CATEGORY':
|
||||
goods = '部分分类商品'
|
||||
break;
|
||||
}
|
||||
return `${shop}${goods}可用`
|
||||
},
|
||||
addToCart (id) { // 添加商品到购物车
|
||||
const params = {
|
||||
num: 1,
|
||||
skuId: id
|
||||
}
|
||||
this.loading = true;
|
||||
addCartGoods(params).then(res => {
|
||||
this.loading = false;
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('商品已成功添加到购物车')
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
}).catch(() => { this.loading = false });
|
||||
},
|
||||
getCouponList () { // 获取优惠券列表
|
||||
// this.loading = true;
|
||||
const params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
couponList(params).then(res => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.couponList = res.result.records
|
||||
}
|
||||
}).catch(() => { this.loading = false })
|
||||
},
|
||||
getOrderList () { // 获取订单列表
|
||||
this.loading = true
|
||||
const params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
tag: 'ALL'
|
||||
}
|
||||
getOrderList(params).then(res => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.orderList = res.result.records;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCollectList () { // 获取收藏列表
|
||||
const params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
type: 'GOODS'
|
||||
}
|
||||
this.loading = true
|
||||
collectList(params).then(res => {
|
||||
this.loading = false
|
||||
this.collectList = res.result.records
|
||||
})
|
||||
},
|
||||
cancelCollect (id) { // 取消商品收藏
|
||||
cancelCollect('GOODS', id).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('取消收藏成功')
|
||||
this.getCollectList();
|
||||
}
|
||||
})
|
||||
},
|
||||
getTracksList () { // 获取足迹列表
|
||||
const params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
this.loading = true
|
||||
tracksList(params).then(res => {
|
||||
this.tracksList = res.result
|
||||
this.loading = false
|
||||
}).catch(() => { this.loading = false })
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../assets/styles/coupon.scss';
|
||||
@import './drawer.scss';
|
||||
.coupon-item{
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
height: 120px;
|
||||
.c-left{
|
||||
padding: 15px;
|
||||
}
|
||||
.c-right{
|
||||
width: 38px;
|
||||
padding: 13px;
|
||||
font-size: 14px;
|
||||
}
|
||||
i{
|
||||
right: 30px;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
155
buyer/src/components/drawer/Main.vue
Normal file
155
buyer/src/components/drawer/Main.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="wrapper" :style="{right:handleDrawer ? '300px' : '0px'}">
|
||||
|
||||
<div class="barItem" @mouseenter="showCartNum(item)" @click="clickBar(item)" v-for="(item,index) in resetConfig.menuList" :key="index">
|
||||
<Tooltip placement="left" :content="item.title">
|
||||
<Icon size="20" :type="item.icon"/>
|
||||
<p class="barTitle" v-if="item.titleShow"> {{item.title}}</p>
|
||||
<div class="circle" v-if="item.title === '购物车'">
|
||||
{{cartNum < 100 ? cartNum : 99}}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<Drawer width="300" class="popup" :title="drawerData.title" :mask="resetConfig.mask" :closable="resetConfig.closable"
|
||||
v-model="handleDrawer">
|
||||
<drawerPage :title="drawerData.title" />
|
||||
</Drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Storage from '@/plugins/storage.js';
|
||||
import Configuration from './config';
|
||||
import drawerPage from './Drawer'
|
||||
import {cartCount} from '@/api/cart.js'
|
||||
export default {
|
||||
name: 'Main',
|
||||
data () {
|
||||
return {
|
||||
resetConfig: Configuration, // 菜单项
|
||||
handleDrawer: false, // 是否可展开
|
||||
drawerData: '' // 菜单基础数据
|
||||
}
|
||||
},
|
||||
components: {drawerPage},
|
||||
computed: {
|
||||
userInfo () {
|
||||
return Storage.getItem('userInfo');
|
||||
},
|
||||
cartNum () {
|
||||
return this.$store.state.cartNum
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showCartNum (item) {
|
||||
if (this.userInfo && item.title === '购物车') {
|
||||
this.getCartList()
|
||||
}
|
||||
},
|
||||
clickBar (val) {
|
||||
if (!this.userInfo) {
|
||||
this.$Modal.confirm({
|
||||
title: '请登录',
|
||||
content: '<p>请登录后执行此操作</p>',
|
||||
okText: '立即登录',
|
||||
cancelText: '继续浏览',
|
||||
onOk: () => {
|
||||
this.$router.push({
|
||||
path: '/login',
|
||||
query: {
|
||||
rePath: this.$router.history.current.path,
|
||||
query: JSON.stringify(this.$router.history.current.query)
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (val.display) {
|
||||
this.handleDrawer = true
|
||||
this.drawerData = val
|
||||
} else {
|
||||
this.handleDrawer = false
|
||||
switch (val.title) {
|
||||
case '会员中心':
|
||||
this.openBlank('/home')
|
||||
break;
|
||||
case '我的资产':
|
||||
this.openBlank('/home/MoneyManagement')
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
openBlank (path) {
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: path
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
},
|
||||
getCartList () { // 获取购物车列表
|
||||
cartCount().then(res => {
|
||||
this.$store.commit('SET_CARTNUM', res.result)
|
||||
this.Cookies.setItem('cartNum', res.result)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
background-color: #000!important;
|
||||
}
|
||||
.barItem {
|
||||
text-align: center;
|
||||
padding: 13px 0;
|
||||
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
&:hover{
|
||||
background-color: $theme_color;
|
||||
.circle{
|
||||
color: $theme_color;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.barTitle {
|
||||
writing-mode: vertical-lr;
|
||||
letter-spacing: 2px;
|
||||
padding: 4px 0;
|
||||
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
background: $theme_color;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 40px;
|
||||
position: fixed;
|
||||
transition: .35s;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
background: $dark_background_color;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
/deep/.popup .ivu-drawer-body{
|
||||
padding: 0!important;
|
||||
background-color: #eee;
|
||||
}
|
||||
/deep/.popup .ivu-drawer-wrap{
|
||||
z-index: 3001;
|
||||
}
|
||||
</style>
|
||||
42
buyer/src/components/drawer/README.md
Normal file
42
buyer/src/components/drawer/README.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# 右侧侧边栏组件
|
||||
> 本组件依赖于iview的组件基础上进行封装
|
||||
>项目结构
|
||||
>* Main -- 组件用于挂在右侧的横栏
|
||||
>* drawer -- 右侧横栏的内容
|
||||
>* config -- 用于设置大小
|
||||
|
||||
|
||||
#### config设置
|
||||
```
|
||||
/**
|
||||
menuList // 组件的menu
|
||||
display //是否显示此menu
|
||||
badge //显示徽标数
|
||||
titleShow //是否显示title
|
||||
*/
|
||||
|
||||
//实例代码
|
||||
width : 50, //bar的大小
|
||||
menuList:[
|
||||
{
|
||||
icon
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
> 账户信息
|
||||
> 购物车
|
||||
> 我的订单
|
||||
> 优惠券
|
||||
> 我的资产
|
||||
> 我的足迹
|
||||
> 我的收藏
|
||||
> 邮箱订阅
|
||||
|
||||
|
||||
## 如何使用
|
||||
1.
|
||||
63
buyer/src/components/drawer/config.js
Normal file
63
buyer/src/components/drawer/config.js
Normal file
@@ -0,0 +1,63 @@
|
||||
const config = {
|
||||
closable: true, // 是否显示右上角关闭按钮
|
||||
mask: true, // 是否显示遮罩层
|
||||
|
||||
menuList: [{
|
||||
icon: 'md-person', // menu的icon
|
||||
title: '会员中心', // menu的标题
|
||||
titleShow: false,
|
||||
path: '', // menu点击的路径
|
||||
display: false // 是否显示此menu
|
||||
},
|
||||
{
|
||||
icon: 'ios-cart', // menu的icon
|
||||
title: '购物车', // menu的标题
|
||||
path: '', // menu点击的路径
|
||||
display: true, // 是否显示此menu
|
||||
badge: 12,
|
||||
titleShow: true
|
||||
},
|
||||
{
|
||||
icon: 'md-clipboard', // menu的icon
|
||||
title: '我的订单', // menu的标题
|
||||
path: '', // menu点击的路径
|
||||
display: true, // 是否显示此menu
|
||||
badge: '',
|
||||
titleShow: false
|
||||
},
|
||||
{
|
||||
icon: 'md-pricetag', // menu的icon
|
||||
title: '优惠券', // menu的标题
|
||||
path: '', // menu点击的路径
|
||||
display: true, // 是否显示此menu
|
||||
badge: '',
|
||||
titleShow: false
|
||||
},
|
||||
{
|
||||
icon: 'logo-usd', // menu的icon
|
||||
title: '我的资产', // menu的标题
|
||||
path: '', // menu点击的路径
|
||||
display: false, // 是否显示此menu
|
||||
badge: '',
|
||||
titleShow: false
|
||||
},
|
||||
{
|
||||
icon: 'ios-eye', // menu的icon
|
||||
title: '我的足迹', // menu的标题
|
||||
path: '', // menu点击的路径
|
||||
display: true, // 是否显示此menu
|
||||
badge: '',
|
||||
titleShow: false
|
||||
},
|
||||
{
|
||||
icon: 'md-star', // menu的icon
|
||||
title: '我的收藏', // menu的标题
|
||||
path: '', // menu点击的路径
|
||||
display: true, // 是否显示此menu
|
||||
badge: '',
|
||||
titleShow: false
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default config
|
||||
130
buyer/src/components/drawer/drawer.scss
Normal file
130
buyer/src/components/drawer/drawer.scss
Normal file
@@ -0,0 +1,130 @@
|
||||
.content-drawer {
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
// 购物车样式
|
||||
.cart-con{
|
||||
position: relative;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
ul>li{
|
||||
font-size: 12px;
|
||||
border-bottom: 1px dashed #999;
|
||||
margin: 0 10px;
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
p{margin-bottom: 10px;}
|
||||
.del{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: $theme_color;
|
||||
span{color: #999;}
|
||||
}
|
||||
|
||||
&:last-child{border: none;}
|
||||
}
|
||||
|
||||
}
|
||||
// 订单样式
|
||||
.order-con{
|
||||
ul>li {
|
||||
margin: 10px;
|
||||
background-color: #fff;
|
||||
.order-status {
|
||||
display: flex;
|
||||
background-color: #666;
|
||||
border-radius: 3px 3px 0 0;
|
||||
color: #fff;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
img{
|
||||
border: 1px solid #eee;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-handle{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding:5px 10px;
|
||||
border-top: 1px solid #eee;
|
||||
span:nth-child(1){
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 优惠券样式
|
||||
.coupon-con{
|
||||
margin-top: 10px;
|
||||
}
|
||||
// 足迹样式
|
||||
.tracks-con,.collect-con{
|
||||
ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
}
|
||||
li {
|
||||
background-color: #fff;
|
||||
margin: 10px;
|
||||
width: 120px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
&:hover{
|
||||
div,.del-icon{
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
img{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div{
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
width: 100%;
|
||||
background-color: #666;
|
||||
color: #fff;
|
||||
&:hover{
|
||||
background-color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.del-icon{
|
||||
display: none;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 我的收藏样式
|
||||
.collect-con{
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user