|
@@ -0,0 +1,530 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="newDirectedPackage">
|
|
|
|
+ <div class="title">
|
|
|
|
+ 新建定向包
|
|
|
|
+ </div>
|
|
|
|
+ <div class="optBOX">
|
|
|
|
+ <div class="leftBox">
|
|
|
|
+ <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
|
|
|
|
+ <a-form-model-item label="定向包名称">
|
|
|
|
+ <a-input placeholder="请输入定向包名称,至多20个字符" style="width:40%" />
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="媒体:">
|
|
|
|
+ <a-radio-group default-value="toutiao" v-model="form.medialType" button-style="solid">
|
|
|
|
+ <a-radio-button :value="1">头条</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="地域:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="" button-style="solid">
|
|
|
|
+ <a-radio-button value="">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="b">按省市</a-radio-button>
|
|
|
|
+ <a-radio-button value="c">按区县</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ <span class=""></span>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="性别:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="" v-model="form.sex" button-style="solid">
|
|
|
|
+ <a-radio-button value="">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="men">男</a-radio-button>
|
|
|
|
+ <a-radio-button value="women">女</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="年龄:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="" button-style="solid">
|
|
|
|
+ <a-radio-button value="">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="men">18-23</a-radio-button>
|
|
|
|
+ <a-radio-button value="women">24-30</a-radio-button>
|
|
|
|
+ <a-radio-button value="women">31-40</a-radio-button>
|
|
|
|
+ <a-radio-button value="women">41-49</a-radio-button>
|
|
|
|
+ <a-radio-button value="women">50+</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="精选流量包:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="" button-style="solid">
|
|
|
|
+ <a-radio-button value="">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="men">应用软件精选</a-radio-button>
|
|
|
|
+ <a-radio-button value="women">游戏精选</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />精选流量包仅支持穿山甲、穿山甲-精选游戏广告位</span>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="行为兴趣:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="" button-style="solid">
|
|
|
|
+ <a-radio-button value="">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="men">系统推荐</a-radio-button>
|
|
|
|
+ <a-radio-button value="women">自定义</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="平台:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="" button-style="solid">
|
|
|
|
+ <a-radio-button value="">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="IOS">IOS</a-radio-button>
|
|
|
|
+ <a-radio-button value="Android">Android</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="过滤已安装:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="" button-style="solid">
|
|
|
|
+ <a-radio-button value="">不过滤</a-radio-button>
|
|
|
|
+ <a-radio-button value="filter">过滤</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="运营商:" class="optItem">
|
|
|
|
+ <radioCheck :checkArr='carrierArr' @getSonValue='getNewUser' />
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="网络:" class="optItem">
|
|
|
|
+ <radioCheck :checkArr='networkArr' @getSonValue='getNewUser' />
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="设备类型:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="" button-style="solid">
|
|
|
|
+ <a-radio-button value="">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="wifi">智能手机</a-radio-button>
|
|
|
|
+ <a-radio-button value="2G">平板</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="手机品牌:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="" v-model="deviceBrand" button-style="solid">
|
|
|
|
+ <a-radio-button value="">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="byBrand">按品牌</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ <div v-if="deviceBrand=='byBrand'" class="deviceBrand">
|
|
|
|
+ <div class="selectBox">
|
|
|
|
+ <div class="selectLeft">
|
|
|
|
+ <div class="title">手机品牌</div>
|
|
|
|
+ <div class="selectBox1">
|
|
|
|
+ <span class="selectLists"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" > 全选 </a-checkbox></span>
|
|
|
|
+ <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="checkGroupChange" class="selectList" ></a-checkbox-group>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="selectRight">
|
|
|
|
+ <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
|
|
|
|
+ <div class="selectBox1">
|
|
|
|
+ <span class="selectListitem" v-for="(item,index) in checkedList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="手机价格:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="" v-model="launchPrice" button-style="solid">
|
|
|
|
+ <a-radio-button value="">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="custom">自定义</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ <span v-if="launchPrice=='custom'">
|
|
|
|
+ <a-slider range :marks="marks" :default-value="[2000, 7000]" :step="null" :min='0' :max='11000' @change="slideChange" />
|
|
|
|
+ </span>
|
|
|
|
+ <span v-else></span>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="新用户:" class="optItem">
|
|
|
|
+ <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="智能放量:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="" button-style="solid">
|
|
|
|
+ <a-radio-button value="">不启用</a-radio-button>
|
|
|
|
+ <a-radio-button value="open">启用</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item label="保存为模板:" class="optItem">
|
|
|
|
+ <a-radio-group default-value="no" button-style="solid">
|
|
|
|
+ <a-radio value="yes">是</a-radio>
|
|
|
|
+ <a-radio value="no">否</a-radio>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
|
|
|
|
+ <a-button type="primary" @click="applicatiSubmit">
|
|
|
|
+ 应用
|
|
|
|
+ </a-button>
|
|
|
|
+ <a-button style="margin-left: 10px;" @click="cancel">
|
|
|
|
+ 取消
|
|
|
|
+ </a-button>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-form-model>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="rightBox">
|
|
|
|
+ <div class="topBox">
|
|
|
|
+ <p class="title">预估可覆盖</p>
|
|
|
|
+ <div class="info">
|
|
|
|
+ <p>抖音视频:<span class="num">{{}}</span>万日活跃用户</p>
|
|
|
|
+ <p>西瓜视频:<span class="num">{{}}</span>万日活跃用户</p>
|
|
|
|
+ <p>火山视频:<span class="num">{{}}</span>万日活跃用户</p>
|
|
|
|
+ <p>今日头条:<span class="num">{{}}</span>万日活跃用户</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="bottomBox">
|
|
|
|
+ <p class="title">受众信息</p>
|
|
|
|
+ <div class="info">
|
|
|
|
+ <p>性别:<span class="num">{{}}</span></p>
|
|
|
|
+ <p>年龄:<span class="num">{{}}</span></p>
|
|
|
|
+ <p>平台:<span class="num">{{}}</span></p>
|
|
|
|
+ <p>网络:<span class="num">{{}}</span></p>
|
|
|
|
+ <p>运营商:<span class="num">{{}}</span></p>
|
|
|
|
+ <p>新用户:<span class="num">{{}}</span></p>
|
|
|
|
+ <p>手机品牌:<span class="num">{{}}</span></p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
|
|
|
|
+const defaultCheckedList = ['Apple', 'Orange'];
|
|
|
|
+import radioCheck from './radioCheck';
|
|
|
|
+
|
|
|
|
+let newUser=[
|
|
|
|
+ {
|
|
|
|
+ value:'',
|
|
|
|
+ title:'不限'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'oneMonth',
|
|
|
|
+ title:'一月以内'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'twoMonth',
|
|
|
|
+ title:'一月到三个月'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'treeMonth',
|
|
|
|
+ title:'三月以上'
|
|
|
|
+ }
|
|
|
|
+]
|
|
|
|
+
|
|
|
|
+let networkArr=[
|
|
|
|
+ {
|
|
|
|
+ value:'',
|
|
|
|
+ title:'不限'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'WIFI',
|
|
|
|
+ title:'wifi'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'2G',
|
|
|
|
+ title:'2G'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'3G',
|
|
|
|
+ title:'3G'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'4G',
|
|
|
|
+ title:'4G'
|
|
|
|
+ },
|
|
|
|
+]
|
|
|
|
+
|
|
|
|
+let carrierArr=[
|
|
|
|
+ {
|
|
|
|
+ value:'',
|
|
|
|
+ title:'不限'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'MOBILE',
|
|
|
|
+ title:'移动'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'UNICOM',
|
|
|
|
+ title:'联通'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'TELCOM',
|
|
|
|
+ title:'电信'
|
|
|
|
+ },
|
|
|
|
+]
|
|
|
|
+let platformArr=[
|
|
|
|
+ {
|
|
|
|
+ value:'',
|
|
|
|
+ title:'不限'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'MOBILE',
|
|
|
|
+ title:'移动'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'UNICOM',
|
|
|
|
+ title:'联通'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'TELCOM',
|
|
|
|
+ title:'电信'
|
|
|
|
+ },
|
|
|
|
+]
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ components:{
|
|
|
|
+ radioCheck,
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ labelCol: { span: 4 },
|
|
|
|
+ wrapperCol: { span: 14 },
|
|
|
|
+ launchPrice:'',//手机价格
|
|
|
|
+ deviceBrand:'',//手机品牌
|
|
|
|
+ form:{
|
|
|
|
+ medialType:1,
|
|
|
|
+ sex:'',
|
|
|
|
+ launchPrice:[],//手机价格
|
|
|
|
+ },
|
|
|
|
+ marks: {
|
|
|
|
+ 0: '0',
|
|
|
|
+ 1000: '',
|
|
|
|
+ 2000: '2000元',
|
|
|
|
+ 2500: '',
|
|
|
|
+ 3000: '',
|
|
|
|
+ 3500: '',
|
|
|
|
+ 4000: '',
|
|
|
|
+ 4500: '',
|
|
|
|
+ 5000: '5000元',
|
|
|
|
+ 5500: '',
|
|
|
|
+ 6000: '',
|
|
|
|
+ 6500: '',
|
|
|
|
+ 7000: '',
|
|
|
|
+ 8000: '',
|
|
|
|
+ 9000: '',
|
|
|
|
+ 10000: '10000元',
|
|
|
|
+ 11000: {
|
|
|
|
+ style: {
|
|
|
|
+ color: '#f50',
|
|
|
|
+ },
|
|
|
|
+ label: <strong>11000元</strong>,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ //选择框
|
|
|
|
+ checkedList: defaultCheckedList,
|
|
|
|
+ indeterminate: true,
|
|
|
|
+ checkAll: false,
|
|
|
|
+ plainOptions,
|
|
|
|
+
|
|
|
|
+ newUser,//新用户的每一项值
|
|
|
|
+ networkArr,//网络
|
|
|
|
+ carrierArr,//运营商
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ //应用按钮
|
|
|
|
+ applicatiSubmit(){
|
|
|
|
+ console.log('submit!', this.form);
|
|
|
|
+ this.$router.push('/modules/BatchCreate/directionalPackage')
|
|
|
|
+ },
|
|
|
|
+ //取消按钮
|
|
|
|
+ cancel(){
|
|
|
|
+ this.$router.push('/modules/BatchCreate/directionalPackage')
|
|
|
|
+ },
|
|
|
|
+ //huakuai de shijian
|
|
|
|
+ slideChange(value) {
|
|
|
|
+ this.form.launchPrice=value;
|
|
|
|
+ },
|
|
|
|
+ btnChange(e){
|
|
|
|
+ console.log(e)
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //多选的事件
|
|
|
|
+ checkGroupChange(checkedList) {
|
|
|
|
+ this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
|
|
|
|
+ this.checkAll = checkedList.length === plainOptions.length;
|
|
|
|
+ },
|
|
|
|
+ onCheckAllChange(e) {
|
|
|
|
+ Object.assign(this, {
|
|
|
|
+ checkedList: e.target.checked ? plainOptions : [],
|
|
|
|
+ indeterminate: false,
|
|
|
|
+ checkAll: e.target.checked,
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ deleteItem(item){
|
|
|
|
+ console.log(item);
|
|
|
|
+ this.checkedList=this.checkedList.filter((element,index) => {
|
|
|
|
+ return element!=item
|
|
|
|
+ });
|
|
|
|
+ if(this.checkedList.length==0){
|
|
|
|
+ this.indeterminate=false
|
|
|
|
+ this.checkAll=false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ clearAll(){
|
|
|
|
+ this.checkedList=[];
|
|
|
|
+ this.indeterminate=false;
|
|
|
|
+ this.checkAll=false
|
|
|
|
+ },
|
|
|
|
+ //获取新用户的选中值
|
|
|
|
+ getNewUser(val){
|
|
|
|
+ console.log(val);
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style lang="scss">
|
|
|
|
+
|
|
|
|
+ .newDirectedPackage .ant-checkbox-group-item{
|
|
|
|
+ // width: 100%;
|
|
|
|
+ display: block ;
|
|
|
|
+ padding: 3px 0;
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ padding: 5px 15px;
|
|
|
|
+ }
|
|
|
|
+ .newDirectedPackage .ant-checkbox-group-item:hover{
|
|
|
|
+ background-color: rgba(0,0,0,.1);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.newDirectedPackage{
|
|
|
|
+ // background-color: #fff;
|
|
|
|
+ .title{
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ padding: 15px 0;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ }
|
|
|
|
+ .optBOX{
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ padding: 15px 0;
|
|
|
|
+ position: relative;
|
|
|
|
+ .optItem{
|
|
|
|
+ // margin-bottom: 15px;
|
|
|
|
+ .typeName{
|
|
|
|
+ width: 130px;
|
|
|
|
+ text-align: right;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+ }
|
|
|
|
+ .tishi{
|
|
|
|
+ display: block;
|
|
|
|
+
|
|
|
|
+ color: #999;
|
|
|
|
+ .tubiao{
|
|
|
|
+ color: red;
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ #btngroup .ant-btn:hover{
|
|
|
|
+ border-color: none;
|
|
|
|
+ }
|
|
|
|
+ .deviceBrand{
|
|
|
|
+ // background: rgb(116, 76, 76);
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 300px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .selectBox{
|
|
|
|
+ display: flex;
|
|
|
|
+ .title{
|
|
|
|
+ background: #f9f9f9;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ padding:0 15px;
|
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
|
+ text-align: left;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ .clear{
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 5px;
|
|
|
|
+ right: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .selectLeft{
|
|
|
|
+ width: 40%;
|
|
|
|
+ margin-right: 2%;
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ }
|
|
|
|
+ .selectRight{
|
|
|
|
+ width: 20%;
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ }
|
|
|
|
+ .selectBox1{
|
|
|
|
+ height: 250px;
|
|
|
|
+ overflow: auto;
|
|
|
|
+
|
|
|
|
+ .selectList{
|
|
|
|
+ display: block;
|
|
|
|
+ width: 100%;
|
|
|
|
+ // padding: 0 15px;
|
|
|
|
+ // padding: 3px 0;
|
|
|
|
+ }
|
|
|
|
+ .selectLists{
|
|
|
|
+ display: block;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 0 15px;
|
|
|
|
+ }
|
|
|
|
+ .selectLists:hover{
|
|
|
|
+ background-color: rgba(0,0,0,.1);
|
|
|
|
+ }
|
|
|
|
+ .selectListitem{
|
|
|
|
+ display: block;
|
|
|
|
+ height: 25px;
|
|
|
|
+ line-height: 25px;
|
|
|
|
+ background-color: #eee;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ padding: 0 10px;
|
|
|
|
+ margin: 8px 10px;
|
|
|
|
+ position: relative;
|
|
|
|
+ #close{
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 10px;
|
|
|
|
+ top: 5px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .rightBox{
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 22%;
|
|
|
|
+ right: 20px;
|
|
|
|
+ width: 230px;
|
|
|
|
+ // height: 500px;
|
|
|
|
+ max-height: 450px;
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ .topBox,.bottomBox{
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
+ background-color: #f9f9f9;
|
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
|
+ border-radius: 10px 10px 0 0;
|
|
|
|
+ .title{
|
|
|
|
+ background-color: #f9f9f9;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ margin: 0 0 10px;
|
|
|
|
+ padding: 5px 0;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ border-bottom: 0;
|
|
|
|
+ // border-radius: 10px;
|
|
|
|
+ }
|
|
|
|
+ .info p{
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
+ color: #999;
|
|
|
|
+ }
|
|
|
|
+ .info .num{
|
|
|
|
+ color: #000;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .bottomBox{
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ border-bottom:0;
|
|
|
|
+ .title{
|
|
|
|
+ background-color: #FFF;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+</style>
|