<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/vue.js"></script> <title>Document</title> <style> .colorList li { display: inline-block; padding: 10px; list-style: none; } .colorList li div { width: 20px; height: 20px; } .colorList li:nth-child(1) div { background-color: #fff; border: 1px solid #dbdbdb; } .colorList li:nth-child(2) div { background-color: #cefeff; border: 1px solid #cefeff; } .colorList li:nth-child(3) div { background-color: #f8f8c3; border: 1px solid #f8f8c3; } .colorList li:nth-child(4) div { background-color: #ffc7ff; border: 1px solid #ffc7ff; } .colorList li:nth-child(5) div { background-color: #9bccfa; border: 1px solid #9bccfa; } .fsul li { display: inline-block; padding: 10px; list-style: none; } .box { border: 1px solid #999; width: 500px; height: 300px; } </style></head><body> <div id="app"> <ul class="colorList"> <li> <div :class="{ chooseed: cbg == 'colorbg1' }" @click="cbg = 'colorbg1'"> </div> </li> <li> <div :class="{ chooseed: cbg == 'colorbg2' }" @click="cbg = 'colorbg2'"> </div> </li> <li> <div :class="{ chooseed: cbg == 'colorbg3' }" @click="cbg = 'colorbg3'"> </div> </li> <li> <div :class="{ chooseed: cbg == 'colorbg4' }" @click="cbg = 'colorbg4'"> </div> </li> <li> <div :class="{ chooseed: cbg == 'colorbg5' }" @click="cbg = 'colorbg5'"> </div> </li> </ul> <ul class="fsul"> 视力保护色： <li> <div :class="{ chooseed: csize == 'fs1', chooseed:ccsize == 'fff1', chooseed:cccsize == 'sss1'}" @click="csize = 'fs1',ccsize = 'fff1',cccsize = 'sss1'"> 大 </div> </li> <li> <div :class="{ chooseed: csize == 'fs2' , chooseed:ccsize == 'fff2', chooseed:cccsize == 'sss2'}" @click="csize = 'fs2',ccsize = 'fff2',cccsize = 'sss2'"> 中 </div> </li> <li> <div :class="{ chooseed: csize == 'fs3' , chooseed:ccsize == 'fff3', chooseed:cccsize == 'sss3'}" @click="csize = 'fs3',ccsize = 'fff3',cccsize = 'sss3'"> 小 </div> </li> </ul> <div class="box" :style="{backgroundColor:cbg == 'colorbg1'?'#fff':cbg == 'colorbg2'?'#cefeff':cbg == 'colorbg3'?'#f8f8c3':(cbg == 'colorbg4'?'#ffc7ff':'#9bccfa')}"> <div :style="{fontSize:csize == 'fs1'?'32px':(csize == 'fs2'?'26px':'24px')}"> 全市疫情防线筑得牢不牢？纪检监察机关进行精准监督 </div> <div :style="{fontSize:ccsize == 'fff1'?'18px':(ccsize == 'fff2'?'16px':'14px')}"> 发布时间：2021年09月10日 发布人：马超 发布部门：办公室 点 </div> <div :style="{fontSize:cccsize == 'sss1'?'20px':(cccsize == 'sss2'?'18px':'16px')}"> 本轮防疫工作开展以来，市纪委监委闻令而动，将疫情防控作为当前政治监督的首要任务、头等大事，迅 </div> </div> </div></body><script> var app = new Vue({ el: "#app", data: { cbg: "colorbg1", csize: "fs2", ccsize: "fff2", cccsize: "sss2", }, })</script></html>- 办公教程
- 系列教程
支付宝扫一扫领取大红包
