12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103 |
- <template>
- <div class="newDirectedPackage">
- <div class="title">
- 新建定向包
- </div>
- <div class="optBOX">
- <div class="leftBox">
- <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-form-item label="定向包名称">
- <a-input placeholder="请输入定向包名称,至多20个字符" style="width:40%" />
- </a-form-item>
- <a-form-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-item>
- <a-form-item label="地域:" class="optItem" >
- <a-radio-group default-value="" button-style="solid" v-model="regionValue">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="REGION_LEVEL_PROVINCE">按省市</a-radio-button>
- <a-radio-button value="REGION_LEVEL_DISTRICT">按区县</a-radio-button>
- <a-radio-button value="REGION_LEVEL_BUSINESS_DISTRICT">按商圈</a-radio-button>
- </a-radio-group>
- <div class="region" v-show="regionValue!=''">
- <!-- 省市 -->
- <div class="provincyCity" v-if="regionValue=='REGION_LEVEL_PROVINCE'">
- <div class="region_input">
- <a-input-search placeholder="输入搜索的省市" enter-button />
- </div>
- <div class="tabChange">
- <div class="tabBox">
- <a-tabs v-model="cityTab" @change="cityTabChange">
- <a-tab-pane key="geography" tab="地理划分">
- <linkMultiSelect title='省份' :listArr='shengshiArr' @getSelectedArr='getSelectedCityArr'/>
- </a-tab-pane>
- <a-tab-pane key="development" tab="发展划分" >
- <linkMultiSelect title='等级' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
- </a-tab-pane>
- </a-tabs>
- </div>
- </div>
- </div>
- <!-- 区县 -->
- <div class="district" v-else-if="regionValue=='REGION_LEVEL_DISTRICT'">
- <linkMultiSelect title='省份' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
- </div>
- <!-- 商圈 -->
- <div class="businessCircle" v-else>
- <div class="tabChange">
- <div class="tabBox">
- <a-tabs v-model="businessTab" @change="businessTabChange">
- <a-tab-pane key="businessCircle" tab="商圈">
- <a-cascader :options="businessOptionsArr" change-on-select @change="businessChange" />
- <linkMultiSelect :titleArr='["商圈"]' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
- </a-tab-pane>
- <a-tab-pane key="addFromMap" tab="从地图添加" >
- <a-input-search placeholder="请输入搜索地址" v-model="MapselectValue" @search="MapSearch">
- <a-button slot="enterButton">
- 搜索
- </a-button>
- </a-input-search>
- </a-tab-pane>
- </a-tabs>
- </div>
- </div>
- </div>
- <div class="region_people">
- <a-radio-group v-model="regionPeopleValue" @change="regionPeopleChange">
- <a-radio value="HOME">居住在该地区的用户</a-radio>
- <a-radio value="TRAVEL"> 到该地区旅行的用户</a-radio>
- <a-radio value="ALL">该地区内的所有用户</a-radio>
- <a-radio value="CURRENT">正在该地区的用户</a-radio>
- </a-radio-group>
- </div>
- </div>
- </a-form-item>
- <a-form-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-item>
- <a-form-item label="年龄:" class="optItem">
- <radioCheck :checkArr='ageArr' @getSonValue='getNewUser' />
- </a-form-item>
- <a-form-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-item>
- <a-form-item label="行为兴趣:" class="optItem">
- <a-radio-group v-model="interestActionMode" button-style="solid">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="RECOMMEND">
- 系统推荐
- <a-tooltip>
- <template slot="title">
- 如与自定义人群包同时使用,系统推荐不生效
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- </a-radio-button>
- <a-radio-button value="CUSTOM">自定义</a-radio-button>
- </a-radio-group>
-
- </a-form-item>
- <div class="interestActionMode" v-show="interestActionMode=='CUSTOM'">
- <a-form-item label="行为:" class="optItem">
- <div>
- <span style="margin-right:5px">在</span>
- <a-select
- mode="multiple"
- label-in-value
- style="width: 210px"
- placeholder="所有行为场景中"
- @change="actionSceneChange"
- :maxTagCount='1'
- >
- <a-select-option value='E-COMMERCE'> 电商互动行为</a-select-option>
- <a-select-option value='NEWS'> 咨询互动行为</a-select-option>
- <a-select-option value='APP'> APP推广行为</a-select-option>
- </a-select>
- <span>中,选择用户</span>
- <a-select v-model="actionDays" style="width: 90px">
- <a-select-option :value='7'>7天 </a-select-option>
- <a-select-option :value='15'>15天 </a-select-option>
- <a-select-option :value='30'>30天 </a-select-option>
- <a-select-option :value='60'>60天 </a-select-option>
- <a-select-option :value='90'>90天 </a-select-option>
- <a-select-option :value='180'>180天 </a-select-option>
- <a-select-option :value='365'>365天 </a-select-option>
- </a-select>
- <span>内发生的行为:</span>
- </div>
- <div class="actionBottom">
- <div class="action_left">
- <a-tabs default-active-key="1" >
- <a-tab-pane key="1" tab="添加类目词">
- <div class="Taxonomic">
- <div class="Taxonomic_search">
- <a-input-search placeholder="请输入行为类目词" style="width: 100%" @search="TaxonomicSearch" />
- </div>
- <div class="Taxonomic_checkbox">
- </div>
- <div class="Taxonomic_relevant">
- <span class="Taxonomic_relevant_top">
- <span class="Taxonomic_relevant_top_title">{{}}相关词:</span>
- <a-button type='link' class="Taxonomic_relevant_top_more">更多></a-button>
- </span>
-
- <span class="Taxonomic_relevant_bottom">
- <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+游戏</a>
- <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+手游</a>
- <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+王者荣耀</a>
- <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+吃鸡</a>
- </span>
- </div>
- </div>
- </a-tab-pane>
- <a-tab-pane key="2" tab="添加关键词" >
- <div class="Taxonomic keyWord">
- <div class="Taxonomic_search">
- <a-input-search placeholder="请输入行为类目词或关键词" style="width: 100%" @search="keyWordSearch" />
- </div>
- <div class="Taxonomic_checkbox keyWords_box">
- <div class="keyWords_box_title">
- {{}}
- </div>
- <ul class="keyWords_box_list">
- <li>
- <span class="mingzi">游戏</span>
- <span class="renshu">21亿</span>
- <span class="caozuo" >
- <a href="javascript:;" class="addKeywords">添加</a>
- <a href="javascript:;" class="searchKeyWord">查关键词</a>
- </span>
- </li>
- </ul>
- </div>
- <div class="Taxonomic_relevant">
- <span class="Taxonomic_relevant_top">
- <a href="javascript:;" class="Taxonomic_relevant_bottom_item">添加全部“{{}}”相关词</a>
- </span>
- </div>
- </div>
- </a-tab-pane>
- </a-tabs>
- </div>
- <div class="action_right">
- <div class="action_right_title">
- <span class="action_right_sum">还可以添加行为:{{}}个</span>
- <span class="action_right_info">
- <span>类目词:{{}}</span>
- <span>关键词:{{}}</span>
- </span>
- <a-button type='link' class="action_right_btn">清空</a-button>
- </div>
- <div class="action_right_bottom">
- <div class="action_right_option">
- <a-select v-model="actOrint" style="width: 80px;" >
- <a-select-option value="all">
- 全部
- </a-select-option>
- <a-select-option value="lucy">
- 类目词
- </a-select-option>
- <a-select-option value="disabled" >
- 关键词
- </a-select-option>
- </a-select>
- <span class="coverPeople">覆盖人数</span>
- </div>
- <div class="action_right_select_list">
- <ul>
- <li>
- <span class="mingzi">游戏</span>
- <span class="renshu">21亿</span>
- <span class="caozuo" >
- <a href="javascript:;" class="delete">删除</a>
- <a href="javascript:;" class="searchKeyWord">查关键词</a>
- </span>
- </li>
- <li>
- <span class="mingzi">游戏</span>
- <span class="renshu">21亿</span>
- <span class="caozuo" >
- <a href="javascript:;" class="delete">删除</a>
- <a href="javascript:;" class="searchKeyWord">查关键词</a>
- </span>
- </li>
- </ul>
- </div>
- <div class="action_right_AISelect">
- <a-tooltip class="actionTooltip">
- <template slot="title">
- 已添加的行为关键词需大于20个,才可以使用自动选词
- </template>
- <a-button type='link' :disabled='AIselect'>使用自动选词</a-button>
-
- </a-tooltip>
- <a-tooltip class="actionTooltip">
- <template slot="title">
- 系统根据行为定向所有已选结果,自动推荐词包
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- </div>
- </div>
- </div>
- </div>
- </a-form-item>
- <a-form-item label="兴趣:" class="optItem">
- </a-form-item>
- </div>
- <a-form-item label="平台:" class="optItem">
- <radioCheck :checkArr='platformArr' @getSonValue='getNewUser' />
- </a-form-item>
- <a-form-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-item>
- <a-form-item label="运营商:" class="optItem">
- <radioCheck :checkArr='carrierArr' @getSonValue='getNewUser' />
- </a-form-item>
- <a-form-item label="网络:" class="optItem">
- <radioCheck :checkArr='networkArr' @getSonValue='getNewUser' />
- </a-form-item>
- <!-- <a-form-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-item> -->
- <a-form-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-item>
- <a-form-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-item>
- <a-form-item label="新用户:" class="optItem">
- <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
- </a-form-item>
- <a-form-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>
- <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />智能放量不支持受众预估</span>
- </a-form-item>
- <a-form-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-item>
- <a-form-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-item>
- </a-form>
- </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';
- import linkMultiSelect from './linkMultiSelect'
- 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:'ANDROID',
- title:'Android'
- },
- {
- value:'IOS',
- title:'iOS'
- },
-
- ]
- let ageArr=[
- {
- value:'',
- title:'不限'
- },
- {
- value:'AGE_BETWEEN_18_23',
- title:' 18-23岁'
- },
- {
- value:'AGE_BETWEEN_24_30',
- title:'24-30岁'
- },
- {
- value:'AGE_BETWEEN_31_40',
- title:'31-40岁'
- },
- {
- value:'AGE_BETWEEN_41_49',
- title:'41-49岁'
- },
- {
- value:'AGE_ABOVE_50',
- title:'大于等于50岁'
- },
- ]
- let options=[
- {
- value: 'zhejiang',
- label: 'Zhejiang',
- children: [
- {
- value: 'hangzhou',
- label: 'Hangzhou',
- children: [
- {
- value: 'xihu',
- label: 'West Lake',
- },
- ],
- },
- ],
- },
- {
- value: 'jiangsu',
- label: 'Jiangsu',
- children: [
- {
- value: 'nanjing',
- label: 'Nanjing',
- children: [
- {
- value: 'zhonghuamen',
- label: 'Zhong Hua Men',
- },
- ],
- },
- ],
- },
- ];
- let shengshiArr=[
- {name:'北京',value:'beijing'},
- {name:'天津',value:'tianjin'},
- {name:'上海',value:'shanghai'},
- {name:'重庆',value:'chongqing'},
- {
- name:'山西',
- value:'shanxi',
- children:[
- {
- name:'太原',
- value:'taiyuan',
- },
- {
- name:'阳泉',
- value:'yangquan',
- children:[
- {
- name:'盂县',
- value:'yuxian',
- children:[
- {
- name:'上社镇',
- value:'shangshezhen'
- }
- ]
- }
- ]
- }
- ]
- },
- ]
- export default {
- components:{
- radioCheck,
- linkMultiSelect
- },
- 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,//运营商
- ageArr,//受众年龄
- platformArr,//受众平台
- //地域下的人群的受众位置分类
- regionPeopleValue:'HOME',
- regionValue:'',//地域的选择项
- cityTab:'geography',//省市下的tab切换
- businessTab:'businessCircle',//商圈的tab值
- businessOptionsArr:[],//商圈的联动数据
- MapselectValue:undefined,//地图的搜索地址
- //行为兴趣选择
- interestActionMode:'',
- actionScene:[],//行为场景
- actionDays:30,//行为天数
- actOrint:'all',
- TaxonomicValue:undefined,//行为下的类目词
- keyWordValue:undefined,//行为下的关键词
- AIselect:true,//行为下的自动选词是否可用
- shengshiArr,
- }
- },
- 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);
- },
- //地域选择里的搜索
- regionOnSearch(value) {
- console.log(value);
- },
- //地域里的受众人群的位置
- regionPeopleChange(e){
- console.log(e.target.value,this.regionPeopleValue)
- },
- //获取选中的城市
- getSelectedCityArr(val){
- console.log(val)
- },
- //省市的tab切换
- cityTabChange(key){
- console.log(key)
- },
- //商圈的tab改变
- businessTabChange(key){
- console.log(key)
- },
- //商圈的联动改变
- businessChange(val){
- console.log(val)
- },
- //地图的搜索事件
- MapSearch(val){
- console.log(val)
- },
- //行为场景
- actionSceneChange(value){
- console.log(value)
- },
- //行为下的 类目搜索框
- TaxonomicSearch(value){
- console.log(value);
- this.TaxonomicValue=value
- },
- //行为下的 关键词搜索框
- keyWordSearch(value){
- console.log(value);
- this.keyWordValue=value
- },
-
- },
- }
- </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: 500px;
- 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>
- <style lang="scss">
- .actionBottom{
- ul,li{
- margin: 0;
- padding: 0;
- list-style: none;
- }
- width: 70%;
- height: 400px;
- display:flex;
- margin-top: 20px;
- .action_left{
- width:60% ;
- margin-right: 2%;
- border: 1px solid #ccc;
- border-radius: 5px;
- padding: 10px 2px;
- .Taxonomic{
- padding: 0 10px;
- .Taxonomic_checkbox{
- margin-top: 10PX;
- height: 220px;
- border: 1px solid #ccc;
- border-radius: 5px;
- }
-
- .Taxonomic_relevant{
- font-size: 12px;
- margin-top: 10px;
- .Taxonomic_relevant_top{
- position: relative;
- display: block;
- height: 20px;
- line-height: 20px;
- .Taxonomic_relevant_top_title{
-
- }
- .Taxonomic_relevant_top_more{
- position: absolute;
- top: 0;
- right: 0;
- font-size: 12px;
- display: block;
- height: 20px;
- line-height: 20px;
- }
- }
- .Taxonomic_relevant_bottom{
- display: block;
- height: 20px;
- line-height: 20px;
- .Taxonomic_relevant_bottom_item{
- margin-right: 5px;
- }
- }
- }
- }
- .keyWords_box_title{
- font-size: 16px;
- font-weight: 600;
- color: #000;
- height: 35px;
- line-height: 35px;
- background-color: rgb(248,249,250);
- }
- .keyWords_box_list{
- height: 185px;
- overflow: auto;
- li{
- height: 30px;
- line-height: 30px;
- font-size: 14px;
- color: #333;
- .caozuo{
- display: none;
- // display: inline-block;
- width:50%;
- text-align: right;
- .delete{
- margin-left: 5px;
- }
- .searchKeyWord{
- margin-left: 15px;
- }
- }
- .mingzi{
- display: inline-block;
- width: 30%;
-
- }
- .renshu{
- display: inline-block;
- width: 15%;
- line-height: 30px;
- height: 30px;
- }
- }
- }
- .keyWords_box_list li:hover .caozuo{
- display: inline-block;
- }
- }
- .action_right{
- width: 35%;
- height: 100%;
- border-radius: 5px;
- border: 1px solid #ccc;
- .action_right_title{
- background-color: rgb(248,249,250);
- padding: 10px 10px 0;
- border-radius: 5px 5px 0 0;
- border-bottom: 1px solid #ccc;
- position: relative;
- }
- .action_right_sum{
- display: block;
- margin-bottom: 5px;
- height: 20px;
- line-height: 20px;
- font-size: 14px;
- color: #333;
- }
- .action_right_info{
- display: block;
- margin-bottom: 5px;
- height: 20px;
- line-height: 20px;
- font-size: 14px;
- color: #999;
- }
- .action_right_btn{
- position: absolute;
- top: 0px;
- right: -5px;
- }
- .action_right_bottom{
-
- .action_right_option{
-
- border-bottom: 1px solid #ccc;
- }
- .ant-select-selection{
- border: 0;
- }
- .coverPeople{
- margin-left: 5px;
- }
- .caozuo{
- display: none;
- .delete{
- margin-left: 5px;
- }
- .searchKeyWord{
- margin-left: 2px;
- }
- }
- .mingzi{
- display: inline-block;
- width: 70px;
-
- }
- .renshu{
- display: inline-block;
- width: 40px;
- line-height: 20px;
- height: 20px;
- }
- .action_right_select_list{
- padding: 5px 10px;
- height: 250px;
- overflow: auto;
- }
- .action_right_select_list li{
- line-height: 20px;
- height: 20px;
- }
- .action_right_select_list li:hover .caozuo{
- display: inline-block;
- }
- .action_right_AISelect{
- height: 30px;
- line-height: 30px;
- font-size: 14px;
- padding: 5px 10px;
- border-top: 1px solid #ccc;
- }
- }
- }
- }
- .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
- background-color: #fff;
- color: #666;
- font-size: 12px;
- }
- </style>
- <style lang="scss">
- .region{
- width: 70%;
- margin-top: 10px;
- .region_input{
- width: 60%;
- }
- .tabChange{
- }
- .ant-tabs-bar{
- border: 0;
- }
- }
- </style>
|