843 lines
25 KiB
Vue
843 lines
25 KiB
Vue
<template>
|
||
<!-- 活动中心-->
|
||
<div class="app-containers">
|
||
<div class="tap-box">
|
||
<div class="t-box" :class="{'actve' : tabindex == index }" v-for="(item,index) in tablist" :key="index"
|
||
@click="getindex(index)">
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
<div class="rp-box">
|
||
<!-- 营销活动-->
|
||
<div class="bai-box" style="height:84vh;overflow: auto" v-show="tabindex == 0">
|
||
<div class="d-s">
|
||
<div class="gang"></div>
|
||
<div style="font-weight: bold">会员营销</div>
|
||
</div>
|
||
<div class="wp-box">
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/礼物@2x.png">
|
||
<div>
|
||
<div class="size_title">开卡有礼</div>
|
||
<div class="size_text">激活会员卡，享受优惠</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="indexType('6')">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="routerPush(1,'add')">创建活动</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/理财@2x.png">
|
||
<div>
|
||
<div class="size_title">充值有礼</div>
|
||
<div class="size_text">充值后赠送金额、积分、经验、 优惠券等</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="goOtherPage(2)">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="goOtherPage(2,'add')">创建活动</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/消费券@2x.png">
|
||
<div>
|
||
<div class="size_title">消费有礼</div>
|
||
<div class="size_text">支付后赠送积分、成长值、优惠券</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="indexType('5')">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="routerPush(3,'add')">创建活动</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/邀请@2x.png">
|
||
<div>
|
||
<div class="size_title">邀请有礼</div>
|
||
<div class="size_text">邀请好友注册会员，获得奖励</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="indexType('7')">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="routerPush(4,'add')">创建活动</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/生日专区@2x.png">
|
||
<div>
|
||
<div class="size_title" @click="indexType('4')">生日有礼</div>
|
||
<div class="size_text">会员生日关怀，激活用户复购</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="indexType('4')">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="routerPush(5,'add')">创建活动</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/充值@2x.png">
|
||
<div>
|
||
<div class="size_title">推荐会员充值有礼</div>
|
||
<div class="size_text">会员充值后，推荐人获得积分、 成长值、优惠券</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="indexType('8')">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="routerPush(6,'add')">创建活动</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/消费卡@2x.png" style="width: 59px;height: 42px">
|
||
<div>
|
||
<div class="size_title">推荐会员消费有礼</div>
|
||
<div class="size_text">会员消费后，推荐人获得积分、 成长值、优惠券</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="indexType('9')">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="routerPush(7,'add')">创建活动</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/营销@2x.png">
|
||
<div>
|
||
<div class="size_title">弹窗营销</div>
|
||
<div class="size_text">支付前定向投放优惠</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="indexType('10')">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="routerPush(8,'add')">创建活动</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="d-s" style="margin-top: 15px">
|
||
<div class="gang"></div>
|
||
<div style="font-weight: bold">价格营销</div>
|
||
</div>
|
||
<div class="wp-box">
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/券@2x.png">
|
||
<div>
|
||
<div class="size_title">分时优惠</div>
|
||
<div class="size_text">不同会员不同时间，指定油品享受 限时优惠</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="routerPush(9,'add')">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="routerPush(9,'add')">创建活动</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/特价申请单@2x.png">
|
||
<div>
|
||
<div class="size_title">限时特价</div>
|
||
<div class="size_text">充值后赠送金额、积分、成长值、 优惠券、锁价优惠</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="routerPush(10,'add')">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="routerPush(10,'add')">创建活动</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/会员营销@2x.png">
|
||
<div>
|
||
<div class="size_title">立减营销</div>
|
||
<div class="size_text">订单满立减营销活动</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="indexType('3')">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="routerPush(11,'add')">创建活动</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-box">
|
||
<div class="nr-top">
|
||
<img src="./imgs/折扣@2x.png">
|
||
<div>
|
||
<div class="size_title">折扣营销</div>
|
||
<div class="size_text">会员折扣营销，限时订单折扣， 引爆店铺流量</div>
|
||
</div>
|
||
</div>
|
||
<div class="nr-bottom">
|
||
<div class="left-bt" @click="goOtherPage(12)">进行中1个</div>
|
||
|
|
||
<div class="right-bt" @click="goOtherPage(12)">创建活动</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 当前活动列表-->
|
||
<div class="bai-box" v-show="tabindex == 1">
|
||
<div class="b-d">
|
||
<div class="d-s">
|
||
<el-input v-model="queryParams.name" placeholder="请输入活动名称"
|
||
style=" width: 260px; margin-right: 15px"></el-input>
|
||
<el-select v-model="queryParams.type" placeholder="请选择活动类型"
|
||
style=" width: 260px; margin-right: 15px">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="d-s">
|
||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh-right" @click="resetQuery">重置</el-button>
|
||
</div>
|
||
</div>
|
||
<div style="height: 68.9vh;overflow: auto">
|
||
<el-table
|
||
:data="tableData"
|
||
border
|
||
style="width: 100%">
|
||
<el-table-column type="selection" align="center" width="55"></el-table-column>
|
||
<el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
|
||
<el-table-column prop="typeText" label="活动类型" align="center"></el-table-column>
|
||
<el-table-column prop="name" label="活动名称" align="center"></el-table-column>
|
||
<el-table-column prop="discountActiveDescribe" label="活动内容" align="center"></el-table-column>
|
||
<el-table-column prop="time" label="活动时间" align="center">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.time==0">不限时间</span>
|
||
<span v-else>{{ scope.row.activeStartTime }} ~ {{ scope.row.activeEndTime }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="userGradeName" label="适用会员等级" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.userGradeName || "--" }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="discountActiveDescribe" label="活动详情" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.discountActiveDescribe || "--" }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="sendNum" label="已领数量" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.sendNum || 0 }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="activeStatus" label="状态" align="center">
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.activeStatus"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949"
|
||
active-value="1"
|
||
disabled
|
||
inactive-value="2">
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createName" label="创建人" align="center"></el-table-column>
|
||
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||
<el-table-column prop="date" label="操作" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="routerPush(scope.row.type,'edit',scope.row)"
|
||
>修改
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
slot="reference"
|
||
@click="deleteActive(scope.row)"
|
||
>删除
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="editStatus(scope.row)"
|
||
>停用
|
||
</el-button>
|
||
</template>
|
||
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.page"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
</div>
|
||
<!-- 历史活动列表-->
|
||
<div class="bai-box" v-show="tabindex == 2">
|
||
<div class="b-d">
|
||
<div class="d-s">
|
||
<el-input v-model="queryParams.name" placeholder="请输入活动名称"
|
||
style=" width: 260px; margin-right: 15px"></el-input>
|
||
<el-select v-model="queryParams.type" placeholder="请选择活动类型"
|
||
style=" width: 260px; margin-right: 15px">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value.toString()"
|
||
:label="item.label"
|
||
:value="item.value.toString()">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="d-s">
|
||
<el-button type="primary" icon="el-icon-search" @click="handleOldQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh-right" @click="resetOldQuery">重置</el-button>
|
||
</div>
|
||
</div>
|
||
<div style="height: 68.9vh;overflow: auto">
|
||
<el-table
|
||
:data="oldTableData"
|
||
border
|
||
style="width: 100%">
|
||
<el-table-column
|
||
type="selection"
|
||
width="55">
|
||
</el-table-column>
|
||
<el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
|
||
<el-table-column prop="typeText" label="活动类型" align="center"></el-table-column>
|
||
<el-table-column prop="name" label="活动名称" align="center"></el-table-column>
|
||
<el-table-column prop="discountActiveDescribe" label="活动内容" align="center"></el-table-column>
|
||
<el-table-column prop="time" label="活动时间" align="center">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.time==0">不限时间</span>
|
||
<span v-else>{{ scope.row.activeStartTime }} ~ {{ scope.row.activeEndTime }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="userGradeName" label="适用会员等级" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.userGradeName || "--" }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="discountActiveDescribe" label="活动详情" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.discountActiveDescribe || "--" }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="sendNum" label="已领数量" align="center"></el-table-column>
|
||
<el-table-column prop="activeStatus" label="状态" align="center">
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.activeStatus"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949"
|
||
active-value="1"
|
||
disabled
|
||
inactive-value="2">
|
||
</el-switch>
|
||
</template>
|
||
|
||
</el-table-column>
|
||
<el-table-column prop="createName" label="创建人" align="center"></el-table-column>
|
||
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||
<el-table-column prop="date" label="操作" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="routerPush(scope.row.type,'edit',scope.row)"
|
||
>修改
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
slot="reference"
|
||
@click="deleteActive(scope.row)"
|
||
>删除
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="editStatus(scope.row)"
|
||
>启用
|
||
</el-button>
|
||
</template>
|
||
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<pagination
|
||
v-show="oldTotal>0"
|
||
:total="oldTotal"
|
||
:page.sync="queryParams.page"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getOldList"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
|
||
import activeDiscount from '../activeDiscount/index'
|
||
import activeNewlyweds from '../activeNewlyweds/index'
|
||
import activeConsumption from '../activeConsumption/index'
|
||
import activeFullminus from '../activeFullminus/index'
|
||
import activeRecommend from '../activeRecommend/index'
|
||
import {deleteActive, editActiveStatus, pageActive} from "@/api/active/active";
|
||
|
||
export default {
|
||
name: 'Exchange',
|
||
data() {
|
||
return {
|
||
ruleForm: {},
|
||
value: 1,
|
||
tabindex: 0,
|
||
//类型 1:储值卡 2：囤油卡 3：立减营销 4：立减营销 5：消费有礼 6：开卡有礼 7：邀请有礼 8分时优惠 9限时特价 （以数据库注释为主）
|
||
options: [
|
||
// {
|
||
// value: '1',
|
||
// label: '储值卡'
|
||
// }, {
|
||
// value: '2',
|
||
// label: '囤油卡'
|
||
// },
|
||
{
|
||
value: '3',
|
||
label: '立减营销'
|
||
}, {
|
||
value: '4',
|
||
label: '生日有礼'
|
||
}, {
|
||
value: '5',
|
||
label: '消费有礼'
|
||
}, {
|
||
value: '6',
|
||
label: '开卡有礼'
|
||
}, {
|
||
value: '7',
|
||
label: '邀请有礼'
|
||
}, {
|
||
value: '8',
|
||
label: '推荐会员充值有礼'
|
||
}, {
|
||
value: '9',
|
||
label: '推荐会员消费有礼'
|
||
}, {
|
||
value: '10',
|
||
label: '弹窗营销'
|
||
}],
|
||
tableData: [{
|
||
date: '2016-05-02',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1518 弄'
|
||
}, {
|
||
date: '2016-05-04',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1517 弄'
|
||
}, {
|
||
date: '2016-05-01',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1519 弄'
|
||
}, {
|
||
date: '2016-05-03',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1516 弄'
|
||
}],
|
||
oldTableData: [],
|
||
tablist: [
|
||
"营销活动",
|
||
"当前活动列表",
|
||
"历史活动列表"
|
||
],
|
||
queryParams: {
|
||
page: 0,
|
||
pageSize: 10,
|
||
name: '',
|
||
type: '',
|
||
activeStatus: ""
|
||
},
|
||
total: 0,
|
||
oldTotal: 0
|
||
|
||
}
|
||
},
|
||
created() {
|
||
if (this.$route.query.id) {
|
||
this.indexType(this.$route.query.id)
|
||
} else {
|
||
this.getList();
|
||
}
|
||
if (this.$route.query.activeId){
|
||
this.tabindex = 1
|
||
}
|
||
|
||
this.getOldList()
|
||
},
|
||
components: {
|
||
activeNewlyweds, activeConsumption, activeDiscount, activeFullminus, activeRecommend
|
||
},
|
||
|
||
methods: {
|
||
getindex(index) {
|
||
this.tabindex = index
|
||
if (index == 1) {
|
||
this.queryParams.type = ""
|
||
this.handleQuery()
|
||
} else if (index == 2) {
|
||
this.queryParams.type = ""
|
||
this.handleOldQuery()
|
||
}
|
||
},
|
||
indexType(id) {
|
||
this.queryParams.type = id
|
||
this.tabindex = 1
|
||
this.handleQuery()
|
||
},
|
||
/**
|
||
* 查询列表
|
||
*/
|
||
getList() {
|
||
this.queryParams.activeStatus = '1'
|
||
pageActive(this.queryParams).then(res => {
|
||
this.tableData = res.data.records
|
||
this.total = res.data.total
|
||
})
|
||
},
|
||
|
||
handleQuery() {
|
||
this.queryParams.page = 1;
|
||
this.getList();
|
||
},
|
||
|
||
resetQuery() {
|
||
this.queryParams.page = 1
|
||
this.queryParams.name = null
|
||
this.queryParams.type = null
|
||
this.getList()
|
||
},
|
||
|
||
/**
|
||
* 查询历史列表
|
||
*/
|
||
getOldList() {
|
||
this.queryParams.activeStatus = '2'
|
||
pageActive(this.queryParams).then(res => {
|
||
this.oldTableData = res.data.records
|
||
this.oldTotal = res.data.total
|
||
})
|
||
},
|
||
|
||
handleOldQuery() {
|
||
this.queryParams.activeStatus = '2'
|
||
this.queryParams.page = 1;
|
||
this.getOldList();
|
||
},
|
||
|
||
resetOldQuery() {
|
||
this.queryParams.page = 1
|
||
this.queryParams.activeStatus = '2'
|
||
this.queryParams.name = null
|
||
this.queryParams.type = null
|
||
this.getOldList()
|
||
},
|
||
// 删除活动信息
|
||
deleteActive(data) {
|
||
this.$modal.confirm('是否删除本条数据，删除后无法恢复！').then(function () {
|
||
return deleteActive(data.id);
|
||
}).then(() => {
|
||
this.handleQuery()
|
||
this.handleOldQuery()
|
||
this.$modal.msgSuccess("删除成功");
|
||
}).catch(() => {
|
||
});
|
||
},
|
||
// 修改活动状态
|
||
editStatus(data) {
|
||
let str = data.activeStatus=='1' ? "停用" : "启用"
|
||
this.$modal.confirm('是否'+str+'本条数据！').then(function () {
|
||
return editActiveStatus(data.id);
|
||
}).then(() => {
|
||
this.handleQuery()
|
||
this.handleOldQuery()
|
||
this.$modal.msgSuccess(str+"成功");
|
||
}).catch(() => {
|
||
});
|
||
},
|
||
routerPush(id,type,data) {
|
||
let activeId = ""
|
||
if (data){
|
||
if (data.type=='3') id = 11
|
||
if (data.type=='4') id = 5
|
||
if (data.type=='5') id = 3
|
||
if (data.type=='6') id = 1
|
||
if (data.type=='7') id = 4
|
||
if (data.type=='8') id = 6
|
||
if (data.type=='9') id = 7
|
||
if (data.type=='10') id = 8
|
||
activeId = data.activeId
|
||
}
|
||
this.$router.push({
|
||
path: '/EventMarketing/openCardGift/index',
|
||
query: {
|
||
id: id,
|
||
activeId:activeId,
|
||
type:type
|
||
}
|
||
});
|
||
},
|
||
// 跳转其他页面
|
||
goOtherPage(id, type) {
|
||
if (id == 12) {
|
||
this.$router.push({
|
||
path: '/userGrade/index',
|
||
query: {id: id}
|
||
});
|
||
}
|
||
if (id == 2) {
|
||
this.$router.push({
|
||
path: '/EventMarketing/CardHolder/index',
|
||
query: {id: id, type: type}
|
||
});
|
||
}
|
||
},
|
||
gobox(id) {
|
||
if (id == 1) {
|
||
this.$router.push('/EventMarketing/activeConsumption/index')
|
||
}
|
||
if (id == 2) {
|
||
this.$router.push('/EventMarketing/activeDiscount/index')
|
||
}
|
||
if (id == 3) {
|
||
this.$router.push('/EventMarketing/activeFullminus/index')
|
||
}
|
||
if (id == 4) {
|
||
this.$router.push('/EventMarketing/activeNewlyweds/index')
|
||
}
|
||
if (id == 5) {
|
||
this.$router.push('/EventMarketing/activeRecommend/index')
|
||
}
|
||
if (id == 6) {
|
||
this.$router.push('/EventMarketing/yijiancoupon/index')
|
||
}
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.app-containers {
|
||
width: 100%;
|
||
background: #f9f9f9;
|
||
}
|
||
|
||
.qr-code {
|
||
margin: 0px auto;
|
||
}
|
||
|
||
.rp-box {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
|
||
}
|
||
|
||
.wrap-box {
|
||
text-align: center;
|
||
width: 375px;
|
||
height: 316px;
|
||
background: #FFFFFF;
|
||
border-radius: 10px 10px 10px 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0px 2px 4px rgb(31 30 47 / 10%);
|
||
margin-right: 25px;
|
||
cursor: pointer;
|
||
margin-bottom: 25px;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.p-r-title {
|
||
position: absolute;
|
||
left: 40px;
|
||
top: 20px;
|
||
color: #fff;
|
||
width: 200px;
|
||
text-align: left;
|
||
}
|
||
|
||
.fji {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.bottom-box {
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
padding-bottom: 15px;
|
||
}
|
||
|
||
.rp-box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.d-s {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tap-box {
|
||
margin-top: 2px;
|
||
width: 100%;
|
||
height: 50px;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.t-box {
|
||
height: 100%;
|
||
font-size: 14px;
|
||
color: #999999;
|
||
border-bottom: 2px solid transparent;
|
||
margin: 0px 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
//border-bottom: 2px solid #FF770F;
|
||
}
|
||
|
||
.actve {
|
||
color: #FF770F !important;
|
||
font-weight: bold;
|
||
border-bottom: 2px solid #FF770F !important;
|
||
}
|
||
|
||
.bai-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
}
|
||
|
||
.gang {
|
||
width: 2px;
|
||
height: 14px;
|
||
background: #FF9655;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.wp-box {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
}
|
||
|
||
.nr-box {
|
||
border-radius: 10px;
|
||
border: 1px solid #EEEEEE;
|
||
margin-top: 15px;
|
||
margin-right: 15px;
|
||
width: 19%;
|
||
margin-right: 1%;
|
||
}
|
||
|
||
.nr-top {
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 55px;
|
||
height: 55px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.size_title {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.size_text {
|
||
font-size: 12px;
|
||
color: #333333;
|
||
height: 34px;
|
||
}
|
||
|
||
.nr-bottom {
|
||
border-top: 1px solid #EEEEEE;
|
||
box-sizing: border-box;
|
||
padding: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #EEEEEE;
|
||
}
|
||
|
||
.left-bt {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
width: 50%;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.right-bt {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
color: #FF9655;
|
||
width: 50%;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.b-d {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
|
||
}
|
||
</style>
|