经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue实现二级弹框案例
来源:jb51  时间:2022/8/23 13:26:52  对本文有异议

本文实例为大家分享了vue实现二级弹框的具体代码,供大家参考,具体内容如下

二级弹框案例,如下图所示

  1. <template>
  2. ? ? <div class="zw-dialog">
  3. ? ? ? ? <div class="zw-top">
  4. ? ? ? ? ? ? <p class="zw-word">请选择职位</p>
  5. ? ? ? ? ? ? <div class="zw-in">
  6. ? ? ? ? ? ? ? ? <!-- <input class="zw-put" v-model="jobKeyWord" placeholder="请输入职位关键词" />-->
  7. ? ? ? ? ? ? ? ? <el-input ?class="in-put" v-model="jobKeyWord"
  8. ? ? ? ? ? ? ? ? ? ? ? ? ? ?@click.native="clickSearchInput"
  9. ? ? ? ? ? ? ? ? ? ? ? ? ? ?clearable
  10. ? ? ? ? ? ? ? ? ? ? ? ? ? ?@blur="blurSearch"
  11. ? ? ? ? ? ? ? ? ? ? ? ? ? ?placeholder="请输入职位关键词"></el-input>
  12. ? ? ? ? ? ? ? ? <div class="in-block" v-show="searchFlag">
  13. ? ? ? ? ? ? ? ? ? ? <ul class="in-ul">
  14. ? ? ? ? ? ? ? ? ? ? ? ? <!--<li class="in-li" v-for="(item,i) in searchList" :key="i">{{item.nameZh}}</li>-->
  15. ? ? ? ? ? ? ? ? ? ? ? ? <li class="in-li" v-for="(item,i) in searchList"
  16. ? ? ? ? ? ? ? ? ? ? ? ? ? ? :key="i" @click="clickTwoCatFun(item)"
  17. ? ? ? ? ? ? ? ? ? ? ? ? ? ? @mousedown= downDrag($event)
  18. ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-html="item.nameVal"></li>
  19. ? ? ? ? ? ? ? ? ? ? </ul>
  20. ? ? ? ? ? ? ? ? </div>
  21. ? ? ? ? ? ? </div>
  22. ? ? ? ? </div>
  23. ? ? ? ? <div class="zw-middle">
  24. ? ? ? ? ? <span class="zw-tag" v-for="(item,i) in clickTwoNameArr" :key="i">
  25. ? ? ? ? ? ? {{item.nameZh}}
  26. ? ? ? ? ? ? <i class="el-icon-close" @click="delChoolseTwoItem(item)"></i>
  27. ? ? ? ? ? </span>
  28. ? ? ? ? ? ? <span class="zw-more">最多选择1个职位类别</span>
  29. ? ? ? ? ? ? <span class="zw-sure" @click="jobSure">确认</span>
  30. ? ? ? ? </div>
  31. ? ? ? ? <div class="zw-main">
  32. ? ? ? ? ? ? <div class="zw-left">
  33. ? ? ? ? ? ? ? ? <ul class="zw-ul">
  34. ? ? ? ? ? ? ? ? ? ? <!--<li class="zw-li li-active">产品/运营/新媒体 <span class="li-num">1</span></li>-->
  35. ? ? ? ? ? ? ? ? ? ? <!-- <template v-for="(item,i) in jobClassList" :key="i">
  36. ? ? ? ? ? ? ? ? ? ? ?</template> ? ?-->
  37. ? ? ? ? ? ? ? ? ? ? <li class="zw-li"
  38. ? ? ? ? ? ? ? ? ? ? ? ? :class="[clickOneJobNameArr.includes(item.id) ? 'li-active' :'']"
  39. ? ? ? ? ? ? ? ? ? ? ? ? v-for="(item,i) in jobClassList"
  40. ? ? ? ? ? ? ? ? ? ? ? ? @click="clickJobItem(item)"
  41. ? ? ? ? ? ? ? ? ? ? ? ? :key="i" >{{item.nameZh}}
  42. ? ? ? ? ? ? ? ? ? ? ? ? <span class="li-num" v-if=" countObj[item.id] ">{{countObj[item.id]}}</span>
  43. ? ? ? ? ? ? ? ? ? ? </li>
  44. ? ? ? ? ? ? ? ? </ul>
  45. ? ? ? ? ? ? </div>
  46. ? ? ? ? ? ? <div class="zw-right">
  47. ? ? ? ? ? ? ? ? <div class="right-main">
  48. ? ? ? ? ? ? ? ? ? ? <!--<span class="job-tag job-active">互联网/移动互联网/电子商务</span>-->
  49. ? ? ? ? ? ? ? ? ? ? <span class="job-tag"
  50. ? ? ? ? ? ? ? ? ? ? ? ? ? :class="[clickTwoIdArr.includes(twoObj.id) ? 'job-active' :'']"
  51. ? ? ? ? ? ? ? ? ? ? ? ? ? v-for="(twoObj,i) in clickCateObj.list"
  52. ? ? ? ? ? ? ? ? ? ? ? ? ? :key="i" @click="clickTwoCatFun(twoObj)">{{twoObj.nameZh}}
  53. ? ? ? ? ? ? ? </span>
  54. ? ? ? ? ? ? ? ? </div>
  55. ? ? ? ? ? ? </div>
  56. ? ? ? ? </div>
  57. ? ? </div>
  58. </template>
  59.  
  60. <script>
  61. ? ? export default {
  62. ? ? ? ? name: "JobClassComp",
  63. ? ? ? ? data(){
  64. ? ? ? ? ? ? return{
  65. ? ? ? ? ? ? ? ? jobKeyWord:'',//职位关键词
  66. ? ? ? ? ? ? ? ? searchFlag:false,//是否展示搜索框
  67. ? ? ? ? ? ? ? ? searchList:[],//搜索数据
  68. ? ? ? ? ? ? ? ? clickOneJobNameArr:[],//存储点击时一级分类
  69. ? ? ? ? ? ? ? ? clickTwoNameArr:[],//选中的二级分类
  70. ? ? ? ? ? ? ? ? clickTwoIdArr:[],//选中的二级分类
  71. ? ? ? ? ? ? ? ? clickCateObj:{},// 点击选中的一级分类
  72. ? ? ? ? ? ? ? ? countObj:{},//二级职位被选中时 一级显示数量
  73. ? ? ? ? ? ? ? ? searchDataList:[], //搜索数据
  74. ? ? ? ? ? ? ? ? allTwoClassList:[],//所有二级分类
  75. ? ? ? ? ? ? }
  76. ? ? ? ? },
  77. ? ? ? ? props:{
  78. ? ? ? ? ? ? form: Object,
  79. ? ? ? ? ? ? isEndDateNow: Boolean,
  80. ? ? ? ? ? ? jobClassList:{
  81. ? ? ? ? ? ? ? ? type:Array,
  82. ? ? ? ? ? ? ? ? default() {
  83. ? ? ? ? ? ? ? ? ? ? return [];
  84. ? ? ? ? ? ? ? ? }
  85. ? ? ? ? ? ? }
  86. ? ? ? ? },
  87. ? ? ? ? computed: {
  88. ? ? ? ? ? ? listLength(){
  89. ? ? ? ? ? ? ? ? return this.jobClassList.length
  90. ? ? ? ? ? ? }
  91. ? ? ? ? },
  92. ? ? ? ? watch:{
  93. ? ? ? ? ? ? jobKeyWord(val){
  94. ? ? ? ? ? ? ? ? if(val.length >0){
  95. ? ? ? ? ? ? ? ? ? ? this.searchList = this.searchDataList.filter(item =>{
  96. ? ? ? ? ? ? ? ? ? ? ? ? val = val.toUpperCase();
  97. ? ? ? ? ? ? ? ? ? ? ? ? let reg = new RegExp("(" + val + ")", "g");
  98. ? ? ? ? ? ? ? ? ? ? ? ? let nameVal = item.nameZh.replace(reg, "<span style='color:#437FFF;'>$1</span>");
  99. ? ? ? ? ? ? ? ? ? ? ? ? item.nameVal = nameVal;
  100. ? ? ? ? ? ? ? ? ? ? ? ? // ? ? return newstr;
  101. ? ? ? ? ? ? ? ? ? ? ? ? return item.nameZh.includes(val)
  102. ? ? ? ? ? ? ? ? ? ? })
  103. ? ? ? ? ? ? ? ? ? ? this.searchFlag = true
  104. ? ? ? ? ? ? ? ? }else {
  105. ? ? ? ? ? ? ? ? ? ? this.searchList = [];
  106. ? ? ? ? ? ? ? ? ? ? this.searchFlag = false
  107. ? ? ? ? ? ? ? ? }
  108.  
  109. ? ? ? ? ? ? },
  110. ? ? ? ? ? ? listLength(val,oldValue){
  111. ? ? ? ? ? ? ? ? /* ?console.log("val==",val)
  112. ? ? ? ? ? ? ? ? ? console.log("oldValue==",oldValue)*/
  113. ? ? ? ? ? ? ? ? if(oldValue === 0 && val >0){
  114. ? ? ? ? ? ? ? ? ? ? //console.log("--22--",this.jobClassList)
  115. ? ? ? ? ? ? ? ? ? ? this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].id ): '';
  116. ? ? ? ? ? ? ? ? ? ? Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
  117. ? ? ? ? ? ? ? ? ? ? this.dealSearchData(); // 处理搜索职位数据
  118. ? ? ? ? ? ? ? ? ? // ?this.doAllTwoClassData() lzs
  119. ? ? ? ? ? ? ? ? }
  120. ? ? ? ? ? ? }
  121. ? ? ? ? },
  122. ? ? ? ? created() {
  123. ? ? ? ? ? ? if(this.jobClassList && this.jobClassList.length >0){
  124. ? ? ? ? ? ? ? ? this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].id ): '';
  125. ? ? ? ? ? ? ? ? Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
  126. ? ? ? ? ? ? ? ? this.dealSearchData(); // 处理搜索职位数据
  127. ? ? ? ? ? ? }
  128. ? ? ? ? },
  129. ? ? ? ? methods:{
  130. ? ? ? ? ? ? clickSearchInput(){
  131. ? ? ? ? ? ? ? ? this.jobKeyWord.length > 0 ? this.searchFlag = true : this.searchFlag=false;
  132. ? ? ? ? ? ? },
  133. ? ? ? ? ? ? //input失去焦点
  134. ? ? ? ? ? ? blurSearch(){
  135. ? ? ? ? ? ? ? ? this.searchFlag = false;
  136. ? ? ? ? ? ? },
  137. ? ? ? ? ? ? downDrag(el){
  138. ? ? ? ? ? ? ? ? el.preventDefault();//阻止input失去焦点事件时的影响
  139. ? ? ? ? ? ? },
  140. ? ? ? ? ? ? //职位确认
  141. ? ? ? ? ? ? jobSure(){
  142. ? ? ? ? ? ? ? ?// this.dialogVisible = false; //add lzs
  143. ? ? ? ? ? ? ? ? if(this.clickTwoNameArr.length >0){
  144. ? ? ? ? ? ? ? ? ? ? this.form.jobIntensionName = '';
  145. ? ? ? ? ? ? ? ? ? ? this.clickTwoNameArr.forEach(item =>{
  146. ? ? ? ? ? ? ? ? ? ? ? ? this.form.jobIntensionName = this.form.jobIntensionName + ',' + item.nameZh ;
  147. ? ? ? ? ? ? ? ? ? ? })
  148. ? ? ? ? ? ? ? ? ? ? this.form.jobIntensionName.length > 0 ? this.form.jobIntensionName = this.form.jobIntensionName.substring(1,this.form.jobIntensionName.length) :'';
  149. ? ? ? ? ? ? ? ? }else {
  150. ? ? ? ? ? ? ? ? ? ? this.form.jobIntensionName = '';
  151. ? ? ? ? ? ? ? ? }
  152. ? ? ? ? ? ? ? ? this.$emit('sureJobMethod',this.clickTwoNameArr)
  153. ? ? ? ? ? ? },
  154. ? ? ? ? ? ? clickJobItem(item){//点击职位类别
  155. ? ? ? ? ? ? ? ? //console.log("item----",item)
  156. ? ? ? ? ? ? ? ? this.clickCateObj =item;
  157. ? ? ? ? ? ? ? ? //处理选中 颜色变化
  158. ? ? ? ? ? ? ? ? if(this.clickOneJobNameArr.length >0){
  159. ? ? ? ? ? ? ? ? ? ? this.clickOneJobNameArr.splice(0, 1);
  160. ? ? ? ? ? ? ? ? ? ? this.clickOneJobNameArr.push(item.id)
  161. ? ? ? ? ? ? ? ? }else{
  162. ? ? ? ? ? ? ? ? ? ? this.clickOneJobNameArr.push(item.id)
  163. ? ? ? ? ? ? ? ? }
  164. ? ? ? ? ? ? },
  165. ? ? ? ? ? ? //点击二级职位名称
  166. ? ? ? ? ? ? clickTwoCatFun(obj){
  167. ? ? ? ? ? ? ? ? //type: search two; =search是点击的搜索框出现,否则就是点击的二级
  168. ? ? ? ? ? ? ? ? // type === 'search' ? this.jobKeyWord = obj.nameZh : '';
  169. ? ? ? ? ? ? ? ? if(!this.clickTwoIdArr.includes(obj.id) && this.clickTwoIdArr.length ===1 ){
  170. ? ? ? ? ? ? ? ? ? ? this.$message({
  171. ? ? ? ? ? ? ? ? ? ? ? ? message: '最多选择1个职位类别哦',
  172. ? ? ? ? ? ? ? ? ? ? ? ? type: 'warning'
  173. ? ? ? ? ? ? ? ? ? ? });
  174. ? ? ? ? ? ? ? ? ? ? return
  175. ? ? ? ? ? ? ? ? }
  176. ? ? ? ? ? ? ? ? if(!this.clickTwoIdArr.includes(obj.id) && this.clickTwoIdArr.length<3){
  177. ? ? ? ? ? ? ? ? ? ? this.clickTwoNameArr.push(obj)
  178. ? ? ? ? ? ? ? ? ? ? this.clickTwoIdArr.push(obj.id)
  179. ? ? ? ? ? ? ? ? ? ? this.form.jobIntensionNameSel.push(obj.id)
  180. ? ? ? ? ? ? ? ? ? ? if(!this.countObj[obj.parentId]){
  181. ? ? ? ? ? ? ? ? ? ? ? ? this.countObj[obj.parentId] = 1
  182. ? ? ? ? ? ? ? ? ? ? }else {
  183. ? ? ? ? ? ? ? ? ? ? ? ? this.countObj[obj.parentId]++;
  184. ? ? ? ? ? ? ? ? ? ? }
  185. ? ? ? ? ? ? ? ? }
  186. ? ? ? ? ? ? },
  187. ? ? ? ? ? ? //要删除的二级分类,改变选中颜色,改变一级分类统计数量
  188. ? ? ? ? ? ? delChoolseTwoItem(delObj){
  189. ? ? ? ? ? ? ? ? // var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; });
  190. ? ? ? ? ? ? ? ? let index = this.clickTwoNameArr.findIndex(item =>{
  191. ? ? ? ? ? ? ? ? ? ? return item.id === delObj.id
  192. ? ? ? ? ? ? ? ? })
  193. ? ? ? ? ? ? ? ? let formIndex = this.form.jobIntensionNameSel.findIndex(idVal =>{
  194. ? ? ? ? ? ? ? ? ? ? return idVal === delObj.id
  195. ? ? ? ? ? ? ? ? })
  196. ? ? ? ? ? ? ? ? this.form.jobIntensionNameSel.splice(formIndex, 1)//删除
  197. ? ? ? ? ? ? ? ? this.clickTwoNameArr.splice(index, 1)
  198. ? ? ? ? ? ? ? ? this.clickTwoIdArr.splice(index, 1)
  199. ? ? ? ? ? ? ? ? if(!this.countObj[delObj.parentId]){
  200. ? ? ? ? ? ? ? ? ? ? this.countObj[delObj.parentId] = 0
  201. ? ? ? ? ? ? ? ? }else {
  202. ? ? ? ? ? ? ? ? ? ? this.countObj[delObj.parentId]--;
  203. ? ? ? ? ? ? ? ? }
  204. ? ? ? ? ? ? },
  205. ? ? ? ? ? ? //处理搜索的数据
  206. ? ? ? ? ? ? dealSearchData(){
  207. ? ? ? ? ? ? ? ? this.jobClassList.forEach(item =>{
  208. ? ? ? ? ? ? ? ? ? ? this.searchDataList = this.searchDataList.concat(item.list)
  209. ? ? ? ? ? ? ? ? })
  210. ? ? ? ? ? ? },
  211.  
  212. ? ? ? ? }
  213. ? ? }
  214. </script>
  215.  
  216. <style scoped lang="less">
  217. ? ? .zw-dialog{
  218. ? ? ? ? /* ?border: 1px solid red;*/
  219. ? ? ? ? width:880px;
  220. ? ? ? ? height:550px;
  221. ? ? ? ? background:rgba(255,255,255,1);
  222.  
  223. ? ? ? ? .zw-top{
  224. ? ? ? ? ? ? height: 52px;
  225. ? ? ? ? ? ? width: 100%;
  226. ? ? ? ? ? ? display: flex;
  227. ? ? ? ? ? ? /*border: 1px solid green;*/
  228. ? ? ? ? ? ? border-bottom: 1px solid #EFEFEF ;
  229. ? ? ? ? ? ? .zw-word{
  230. ? ? ? ? ? ? ? ? width: 200px;
  231. ? ? ? ? ? ? ? ? /* text-align: center;*/
  232. ? ? ? ? ? ? ? ? margin-left: 30px;
  233. ? ? ? ? ? ? ? ? line-height: 52px;
  234. ? ? ? ? ? ? ? ? font-size: 16px;
  235. ? ? ? ? ? ? ? ? color: #333333;
  236. ? ? ? ? ? ? }
  237. ? ? ? ? ? ? .zw-in{
  238. ? ? ? ? ? ? ? ? /* border: 1px solid blue;*/
  239. ? ? ? ? ? ? ? ? width: calc(100% - 200px);
  240. ? ? ? ? ? ? ? ? line-height: 52px;
  241. ? ? ? ? ? ? ? ? .zw-put{
  242. ? ? ? ? ? ? ? ? ? ? border-radius:15px;
  243. ? ? ? ? ? ? ? ? ? ? border:1px solid rgba(224,224,224,1);
  244. ? ? ? ? ? ? ? ? ? ? width: 200px;
  245. ? ? ? ? ? ? ? ? ? ? height: 30px;
  246. ? ? ? ? ? ? ? ? ? ? margin-left: 32px;
  247. ? ? ? ? ? ? ? ? ? ? font-size: 12px;
  248. ? ? ? ? ? ? ? ? ? ? padding-left: 20px;
  249. ? ? ? ? ? ? ? ? }
  250. ? ? ? ? ? ? ? ? .in-put{
  251. ? ? ? ? ? ? ? ? ? ? width: 200px;
  252. ? ? ? ? ? ? ? ? ? ? height: 30px;
  253. ? ? ? ? ? ? ? ? ? ? /deep/ .el-input__inner{
  254. ? ? ? ? ? ? ? ? ? ? ? ? border-radius:15px;
  255. ? ? ? ? ? ? ? ? ? ? ? ? color: #999999;
  256. ? ? ? ? ? ? ? ? ? ? ? ? font-size: 12px;
  257. ? ? ? ? ? ? ? ? ? ? }
  258. ? ? ? ? ? ? ? ? ? ? /deep/ input::-webkit-input-placeholder {
  259. ? ? ? ? ? ? ? ? ? ? ? ? /* WebKit browsers */
  260. ? ? ? ? ? ? ? ? ? ? ? ? font-size: 12px;
  261. ? ? ? ? ? ? ? ? ? ? ? ? color: #999999;
  262. ? ? ? ? ? ? ? ? ? ? }
  263. ? ? ? ? ? ? ? ? ? ? /deep/ input:-moz-placeholder{
  264. ? ? ? ? ? ? ? ? ? ? ? ? /* Mozilla Firefox 4 to 18 */
  265. ? ? ? ? ? ? ? ? ? ? ? ? font-size: 12px;
  266. ? ? ? ? ? ? ? ? ? ? ? ? color: #999999;
  267. ? ? ? ? ? ? ? ? ? ? }
  268. ? ? ? ? ? ? ? ? ? ? /deep/ input::-moz-placeholder{
  269. ? ? ? ? ? ? ? ? ? ? ? ? /* Mozilla Firefox 19+ */
  270. ? ? ? ? ? ? ? ? ? ? ? ? font-size: 12px;
  271. ? ? ? ? ? ? ? ? ? ? ? ? color: #999999;
  272. ? ? ? ? ? ? ? ? ? ? }
  273. ? ? ? ? ? ? ? ? ? ? /deep/ input:-ms-input-placeholder{
  274. ? ? ? ? ? ? ? ? ? ? ? ? font-size: 12px;
  275. ? ? ? ? ? ? ? ? ? ? ? ? color: #999999;
  276. ? ? ? ? ? ? ? ? ? ? }
  277. ? ? ? ? ? ? ? ? }
  278. ? ? ? ? ? ? ? ? .in-block{
  279. ? ? ? ? ? ? ? ? ? ? width: 200px;
  280. ? ? ? ? ? ? ? ? ? ? height: 290px;
  281. ? ? ? ? ? ? ? ? ? ? z-index: 11;
  282. ? ? ? ? ? ? ? ? ? ? box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
  283. ? ? ? ? ? ? ? ? ? ? position: relative;
  284. ? ? ? ? ? ? ? ? ? ? background: #ffffff;
  285. ? ? ? ? ? ? ? ? ? ? overflow: scroll;
  286.  
  287. ? ? ? ? ? ? ? ? ? ? .in-ul{
  288. ? ? ? ? ? ? ? ? ? ? ? ? padding:5px 0px;
  289. ? ? ? ? ? ? ? ? ? ? ? ? .in-li{
  290. ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: #000000;
  291. ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding: 10px 20px;
  292. ? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height: 20px;
  293. ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 14px;
  294. ? ? ? ? ? ? ? ? ? ? ? ? ? ? &:hover{
  295. ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cursor: pointer;
  296. ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background: #F7F9FD;
  297. ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
  298.  
  299. ? ? ? ? ? ? ? ? ? ? ? ? }
  300. ? ? ? ? ? ? ? ? ? ? }
  301. ? ? ? ? ? ? ? ? }
  302.  
  303.  
  304. ? ? ? ? ? ? }
  305. ? ? ? ? }
  306. ? ? ? ? .zw-middle{
  307. ? ? ? ? ? ? /*width: 100%;*/
  308. ? ? ? ? ? ? height: 50px;
  309. ? ? ? ? ? ? /* ?border: 1px solid green;*/
  310. ? ? ? ? ? ? display: flex;
  311. ? ? ? ? ? ? align-items: center;
  312. ? ? ? ? ? ? padding-left: 30px;
  313. ? ? ? ? ? ? .zw-tag{
  314. ? ? ? ? ? ? ? ? display: inline-block;
  315. ? ? ? ? ? ? ? ? border-radius:15px;
  316. ? ? ? ? ? ? ? ? border:1px solid rgba(67,127,255,1);
  317. ? ? ? ? ? ? ? ? padding: 5px 12px 5px 10px;
  318. ? ? ? ? ? ? ? ? margin-right: 16px;
  319. ? ? ? ? ? ? ? ? font-size:13px;
  320. ? ? ? ? ? ? ? ? color: #437FFF;
  321.  
  322. ? ? ? ? ? ? ? ? i{
  323. ? ? ? ? ? ? ? ? ? ? cursor: pointer;
  324. ? ? ? ? ? ? ? ? ? ? padding-left: 4px;
  325. ? ? ? ? ? ? ? ? }
  326. ? ? ? ? ? ? }
  327. ? ? ? ? ? ? .zw-more{
  328. ? ? ? ? ? ? ? ? color: #CCCCCC;
  329. ? ? ? ? ? ? ? ? font-size:13px;
  330. ? ? ? ? ? ? }
  331. ? ? ? ? ? ? .zw-sure{
  332. ? ? ? ? ? ? ? ? display: inline-block;
  333. ? ? ? ? ? ? ? ? width: 72px;
  334. ? ? ? ? ? ? ? ? height: 28px;
  335. ? ? ? ? ? ? ? ? line-height: 28px;
  336. ? ? ? ? ? ? ? ? text-align: center;
  337. ? ? ? ? ? ? ? ? background:rgba(67,127,255,1);
  338. ? ? ? ? ? ? ? ? border-radius:15px;
  339. ? ? ? ? ? ? ? ? font-size:13px;
  340. ? ? ? ? ? ? ? ? color: #ffffff;
  341. ? ? ? ? ? ? ? ? position: absolute;
  342. ? ? ? ? ? ? ? ? right: 30px;
  343. ? ? ? ? ? ? ? ? &:hover{
  344. ? ? ? ? ? ? ? ? ? ? cursor: pointer;
  345. ? ? ? ? ? ? ? ? }
  346. ? ? ? ? ? ? }
  347. ? ? ? ? }
  348. ? ? ? ? .zw-main{
  349. ? ? ? ? ? ? display: flex;
  350. ? ? ? ? ? ? .zw-left{
  351. ? ? ? ? ? ? ? ? width: 200px;
  352. ? ? ? ? ? ? ? ? height: 443px;
  353. ? ? ? ? ? ? ? ? overflow: scroll;
  354. ? ? ? ? ? ? ? ? /*border: 1px solid red;*/
  355. ? ? ? ? ? ? ? ? .zw-ul{
  356. ? ? ? ? ? ? ? ? ? ? background:rgba(249,250,251,1);
  357. ? ? ? ? ? ? ? ? ? ? .zw-li{
  358. ? ? ? ? ? ? ? ? ? ? ? ? height: 50px;
  359. ? ? ? ? ? ? ? ? ? ? ? ? /* line-height: 50px;*/
  360. ? ? ? ? ? ? ? ? ? ? ? ? text-align: center;
  361. ? ? ? ? ? ? ? ? ? ? ? ? align-items: center;
  362. ? ? ? ? ? ? ? ? ? ? ? ? display: flex;
  363. ? ? ? ? ? ? ? ? ? ? ? ? justify-content: center;
  364. ? ? ? ? ? ? ? ? ? ? ? ? border-left: 4px solid transparent;
  365. ? ? ? ? ? ? ? ? ? ? ? ? &:hover{
  366. ? ? ? ? ? ? ? ? ? ? ? ? ? ? cursor: pointer;
  367. ? ? ? ? ? ? ? ? ? ? ? ? }
  368. ? ? ? ? ? ? ? ? ? ? ? ? /*border: 1px solid pink;*/
  369. ? ? ? ? ? ? ? ? ? ? ? ? .li-num{
  370. ? ? ? ? ? ? ? ? ? ? ? ? ? ? display: inline-block;
  371. ? ? ? ? ? ? ? ? ? ? ? ? ? ? background: #437FFF;
  372. ? ? ? ? ? ? ? ? ? ? ? ? ? ? width: 16px;
  373. ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 16px;
  374. ? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height: 16px;
  375. ? ? ? ? ? ? ? ? ? ? ? ? ? ? border-radius: 50%;
  376. ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size:13px;
  377. ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:#ffffff;
  378. ? ? ? ? ? ? ? ? ? ? ? ? ? ? margin-left: 8px;
  379. ? ? ? ? ? ? ? ? ? ? ? ? }
  380. ? ? ? ? ? ? ? ? ? ? }
  381. ? ? ? ? ? ? ? ? ? ? .li-active{
  382. ? ? ? ? ? ? ? ? ? ? ? ? border-left: 4px solid #437FFF;
  383. ? ? ? ? ? ? ? ? ? ? ? ? background:rgba(255,255,255,1);
  384. ? ? ? ? ? ? ? ? ? ? }
  385. ? ? ? ? ? ? ? ? }
  386. ? ? ? ? ? ? }
  387. ? ? ? ? ? ? .zw-right{
  388. ? ? ? ? ? ? ? ? /*border: 1px solid black;*/
  389.  
  390. ? ? ? ? ? ? ? ? width: calc(100% - 200px);
  391. ? ? ? ? ? ? ? ? height: 443px;
  392. ? ? ? ? ? ? ? ? overflow: scroll;
  393. ? ? ? ? ? ? ? ? .right-main{
  394.  
  395. ? ? ? ? ? ? ? ? ? ? .job-tag{
  396. ? ? ? ? ? ? ? ? ? ? ? ? display: inline-block;
  397. ? ? ? ? ? ? ? ? ? ? ? ? margin: 16px 20px;
  398. ? ? ? ? ? ? ? ? ? ? ? ? width: 182px;
  399. ? ? ? ? ? ? ? ? ? ? ? ? font-size:14px;
  400. ? ? ? ? ? ? ? ? ? ? ? ? color: #444444;
  401. ? ? ? ? ? ? ? ? ? ? ? ? &:hover{
  402. ? ? ? ? ? ? ? ? ? ? ? ? ? ? cursor: pointer;
  403. ? ? ? ? ? ? ? ? ? ? ? ? }
  404. ? ? ? ? ? ? ? ? ? ? }
  405. ? ? ? ? ? ? ? ? ? ? .job-active{
  406. ? ? ? ? ? ? ? ? ? ? ? ? color: #437FFF;
  407. ? ? ? ? ? ? ? ? ? ? }
  408. ? ? ? ? ? ? ? ? }
  409. ? ? ? ? ? ? }
  410.  
  411. ? ? ? ? }
  412. ? ? }
  413. </style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号