src/pages/vindicate/index/App.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/pages/vindicate/views/restartSettings.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/pages/vindicate/views/systemClean.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/pages/vindicate/views/updateSettings.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/pages/vindicate/index/App.vue
@@ -1,5 +1,5 @@ <template> <div class="container"> <div class="container" v-if="!showWelcome"> <div class="container-left"> <div class="left-card" @@ -13,11 +13,61 @@ <span class="card-text">{{ item.name }}</span> </div> </div> <systemClean v-if="activePage == 1" style="width: 100%" :free="free" :full="full" @refreshPercent="getLeftPer"></systemClean> <updateSettings v-if="activePage == 0" style="width: 100%"></updateSettings> <systemClean v-if="activePage == 1" style="width: 100%" :free="free" :full="full" @refreshPercent="getLeftPer" ref="view_1"></systemClean> <updateSettings v-if="activePage == 0" style="width: 100%" ref="view_0"></updateSettings> <!-- <back-up v-if="activePage == 3" style="width: 100%"></back-up> --> <restartSettings v-if="activePage == 2" style="width: 100%"></restartSettings> <sysInfo v-if="activePage == 3" style="width: 100%"></sysInfo> <restartSettings v-if="activePage == 2" style="width: 100%" ref="view_2"></restartSettings> <sysInfo v-if="activePage == 3" style="width: 100%" ref="view_3"></sysInfo> </div> <div class="welcome-page" v-else ref="curPage"> <div class="search-box" :class="showRecomand ? 'border-change' : ''" @click.stop > <!-- @blur="showRecomand = false" --> <el-input class="search-input" placeholder="查找设置" size="mini" @focus="showRecomand = true" clearable @input="filterRecomand" :suffix-icon="showRecomand && searchText.length ? '' : 'el-icon-search'" v-model="searchText" > </el-input> <div class="search-res" v-if="showRecomand"> <div class="res-bar" v-for="(item, index) in searchArrForShow" :key="index" @click="pickQuick(item.addr)" > {{ item.name }} </div> <div class="no-res-bar" v-if="searchArrForShow.length == 0"> 没有找到与 {{ searchText }} 相关的结果 </div> </div> <div class="dummy-end" v-if="showRecomand" style="height: 14px"></div> </div> <div class="nav-items"> <div class="nav-child" @click="openWelcome(i)" v-for="(item, i) in menuArr" :key="i" > <div class="child-info"> <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> --> <img :src="item.img_black" alt="" /> <span class="welcome-title">{{ item.name }}</span> </div> </div> </div> </div> </template> @@ -47,9 +97,19 @@ { name: "重启设置" ,img_black:"/images/vindicate/重启设置-黑.png", img_white:"/images/vindicate/重启设置-白.png",}, { name: "系统信息" ,img_black:"/images/vindicate/系统信息-黑.png", img_white:"/images/vindicate/系统信息-白.png",}, ], searchArr: [ { name: "系统设置", addr: [0] }, { name: "系统更新", addr: [0, 0] }, { name: "更新设置", addr: [0, 1] }, { name: "系统清理", addr: [1] }, { name: "重启设置", addr: [2] }, { name: "系统信息", addr: [3] }, ], activePage: 0, free: 0, full: 0, showWelcome:true, searchText:'', }; }, created() { @@ -78,10 +138,190 @@ this.full = res.data.all }) }, pickQuick(addr) { if (addr.length == 1) { this.openWelcome(addr[0]); } else { this.openWelcome(addr[0]); this.$nextTick(() => { if (addr[0] == 1) { // addr[1] == 0 // ? this.changeSwitch("isNtp") // : this.changeSwitch("isManual"); return; } this.$refs[`view_${addr[0]}`].openRight(addr[1]); }); } }, openWelcome(i) { this.showWelcome = false; this.openMenu(1,i); }, }, computed:{ searchArrForShow() { if (this.searchText == "") { return this.searchArr; } else { return this.searchArr.filter((item) => { return item.name.indexOf(this.searchText.toUpperCase()) > -1; }); } }, } }; </script> <style lang="scss"> .welcome-page { width: 100%; height: 100%; display: -ms-flexbox; padding: 145px 32px 50px 32px; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); .border-change { border-radius: 20px !important; } .search-box { width: 332px; z-index: 999; // margin: 55px auto; position: fixed; left: calc(50% - 166px); top: 50px; background: rgba(255, 255, 255, 0.8); border: 2px solid #4e94ff; box-sizing: border-box; backdrop-filter: blur(4px); border-radius: 40px; .search-input { font-size: 14px; .el-input--mini .el-input__inner { height: 36px; line-height: 36px; } .el-input--suffix .el-input__inner { padding-right: 40px; } .el-input__inner { background-color: #fff; background-image: none; border-radius: 40px; border: none; box-sizing: border-box; color: #606266; display: inline-block; font-size: 14px; height: 36px; line-height: 36px; outline: 0; padding: 0 20px; -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; font-weight: bold; } .el-input__suffix { display: flex; align-items: center; padding-right: 10px; .el-input__suffix-inner { border-color: none; .el-icon-circle-close:before { content: "\e79d" !important; font-size: 17px; } .el-icon-search { color: #2f2d3d; font-weight: bold; font-size: 17px; } } } } .search-res { max-height: 240px; overflow: auto; .res-bar { height: 40px; line-height: 40px; text-align: left; box-sizing: border-box; padding: 0 20px; color: #333333; font-size: 14px; cursor: pointer; } .no-res-bar { height: 40px; line-height: 40px; text-align: left; box-sizing: border-box; padding: 0 20px; color: #333333; font-size: 14px; } .res-bar:hover { background: #f5f5f6 10%; font-weight: bold; color: #4e94ff; } // .res-bar:last-child { // border-radius: 0 0 20px 20px; // } } } .nav-items { .nav-child { box-sizing: border-box; background-color: rgba(251, 251, 255, 0.1); backdrop-filter: blur(4px); float: left; width: 46%; height: 190px; margin: 0 15px; margin-bottom: 30px; border-radius: 15px; display: flex; justify-content: center; align-items: center; cursor: pointer; // box-shadow: 2px 2px 4px rgb(226, 226, 226); .child-info { display: flex; flex-direction: column; // justify-content: space-around; height: 100%; .welcome-icon { font-size: 72px; } img { width: 64px; margin: 0 auto; margin-top: 65px; height: 50px; } .welcome-title { font-size: 16px; font-weight: bold; margin-top: 24px; color: #333333; } } } .nav-child:hover { // box-shadow: 4px 4px 12px rgb(218, 218, 218); // transform: translate3d(0, -1px, 0); // transition: all 0.3s; } } } .container { height: 100%; width: 100%; @@ -99,6 +339,7 @@ padding: 17px 10px 0 10px; box-sizing: border-box; background: #fff; border-top:2px solid #E1E0E6 ; .left-card { position: relative; width: 224px; @@ -107,7 +348,7 @@ border-radius: 8px; margin-bottom: 4px; display: flex; background-color: #F2F2F7; background-color: #fff; align-items: center; .icon_white { position: absolute; @@ -131,7 +372,7 @@ } .left-card-active { color: #fff; background-color: var(--colorCard); background-color: var(--colorCard) !important; .icon_black { visibility: hidden; } @@ -145,18 +386,8 @@ } .left-card:hover { background-color: var(--colorCard); color: #fff; .iconfont { color: #333333; background-color: #fff; } .icon_black { visibility: hidden; } .icon_white{ visibility: visible; } background-color: #F2F2F7; } } src/pages/vindicate/views/restartSettings.vue
@@ -343,6 +343,7 @@ .restart { margin: 0 auto; padding: 10px; width: 74% !important; font-size: 16px; color: #333; font-weight: 700; src/pages/vindicate/views/systemClean.vue
@@ -9,7 +9,7 @@ <el-progress v-if="percent == 0" type="circle" :percentage="100-percent" status="exception" stroke-width="10"></el-progress> </div> <div class="cap-text"> <span>磁盘可用: {{ percent }}%</span> <span class="useable">磁盘可用: {{ percent }}%</span> </div> </div> @@ -19,7 +19,7 @@ <div class="clear-list"> <span class="t">请选择要清理的数据范围</span> <el-date-picker <el-date-picker popper-class="clean-time-picker" style="width: 100%" v-model="dataRange" value-format="yyyy-MM-dd" @@ -110,6 +110,7 @@ } .clear { position: relative; padding: 10px; border-top:2px solid #E1E0E6 ; border-left:2px solid #E1E0E6 ; @@ -122,6 +123,9 @@ align-items: center; justify-content: space-between; padding: 0 45px; color: #333333; font-weight: bold; font-size: 16px; &:first-child { border-bottom: 1px solid #E1E0E6; @@ -165,8 +169,67 @@ display: none !important; } } .cap-text { color: #333333; font-weight: bold; font-size: 16px; .useable { margin-left:20px ; } } } .el-button.el-button--primary { width: 150px !important; height: 30px !important; line-height: 7px !important; font-size: 14px !important; color: #fff !important; background: var(--colorCard) !important; border-radius: 25px !important; border: none !important; } .el-date-editor.el-range-editor { height: 48px; width: 361px !important; border-radius: 8px; .el-input__icon.el-range__icon.el-icon-date { margin:0 15px ; &::before { line-height: 40px; font-size: 20px; color: #333; } } .el-range-separator{ line-height: 41px; } input { width: 127px; height: 32px; font-size: 12px; background: #F2F2F7; border-radius: 20px; } } .t { height: 22px; width: 242px; } } .warm { position: absolute; bottom: 60px; left: 50%; width: 420px; transform:translateX(-50%) ; .icontishi-zhuyi { margin-right:10px ; color: red; } } } src/pages/vindicate/views/updateSettings.vue
@@ -47,8 +47,14 @@ <div class="desc desc-suc" v-if="!checking && !hasNewVersion"> 当前已经是最新版本 </div> <div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading"> {{verText}} </div> <el-button v-if="hasNewVersion && !checking" v-if="hasNewVersion && !checking&&!upgrading" :loading="upgrading" type="primary" style="width: 150px" @@ -56,13 +62,29 @@ @click="upgradeNewVersion" >更新</el-button > </div> <div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading"> {{verText}} </div> </div> <div class="upload-center" v-if="radio2 == '上传更新'"> <div class="upload-info"><span class="icon iconfont"></span> 上传安装软件</div> <div class="upload-top"> <div class="upload-container"> <div class="upload-fail " v-if="upStatus===0"> <i class="icon iconfont upload-icon">  </i> <p>上传失败,请重新上传。</p> </div> <div class="upload-success" v-if="upStatus===1"> <i class="icon iconfont upload-icon">  </i> <p>上传成功,请点击更新按钮开始更新。</p> </div> <el-upload class="upload-demo" drag @@ -83,6 +105,8 @@ <div class="el-upload__tip" slot="tip"></div> </el-upload> </div> <span class="icon iconfont spin-bg" :class="shengjiing ? 'spin-bg-rot' : ''" @@ -91,6 +115,7 @@ > <div class="desc" v-if="shengjiing">正在进行更新……</div> <el-button v-if="!upgrading" type="primary" style="width: 150px; font-size: 15px" @click="upgrade" @@ -168,7 +193,8 @@ upgrading: false, checking: true, newVersionName: "", hasNewVersion: true, hasNewVersion: false, upStatus:'', sysSetList: [ { title: "自动清理软件包缓存", val: false, name: "sys_auto_clean" }, { title: "更新提醒", val: false, name: "sys_update_notice" }, @@ -251,7 +277,16 @@ uploadUpgradePkg(param).then((res) => { this.upgrading = false; this.pkgID = res.data.id; }); this.upStatus = 1 setTimeout(() => { this.upStatus ='' }, 2000); }).catch(()=>{ this.upStatus = 0 setTimeout(() => { this.upStatus ='' }, 2000); }) }, upgrade() { this.shengjiing = true; @@ -314,6 +349,7 @@ } }); }, }, }; </script> @@ -341,7 +377,6 @@ border-right: 4px solid #f8f8f8; .menu-item { background-color: #F2F2F7; height: 56px; margin-bottom: 4px; border-radius: 8px; @@ -365,7 +400,7 @@ } } .menu-item-active { background-color: var(--colorCard); background-color: var(--colorCard) !important; .iconfont { color: #fff !important; } @@ -374,13 +409,7 @@ } } .menu-item:hover { background-color: var(--colorCard); .iconfont { color: #fff; } .menu-text { color: #fff; } background-color: #F2F2F7; } } .cluster-right { @@ -423,8 +452,35 @@ .net-set { display: flex; flex-direction: column; justify-content: space-between; justify-content: start; height: 95%; padding: 0 30px; .el-radio-group { margin-top:33px ; .el-radio-button__inner { font-size: 14px; width: 84px; height: 28px; padding: 0; border-radius: 20px; text-align: center; line-height: 28px; background: #F2F2F7 !important; border: none !important; box-shadow:none !important; &:hover { color: var(--colorCard) !important; } } & label.is-active .el-radio-button__inner { background: var(--colorCard) !important; border: none !important; &:hover { color: white !important; } } } @keyframes spin { from { transform: rotate(0deg); @@ -436,19 +492,17 @@ .spin-bg { color: rgb(206, 205, 205); font-size: 100px; margin-bottom: 20px; font-size: 60px; margin-top: 60px; margin-bottom:15px ; } .spin-bg-rot { animation: spin 0.8s linear infinite; } .desc { height: 20px; line-height: 20px; font-size: 15px; color: rgb(231, 121, 58); margin-bottom: 20px; font-weight: 600; font-weight: bold; font-size: 16px; color: #333333; } .update-center { display: flex; @@ -456,26 +510,72 @@ align-items: center; .desc-suc { color: #3a8120; color: #333; border-radius: 8px; } .el-button { width: 100px; margin-top: 48px; width: 150px; height: 40px; border-radius: 25px; font-size: 15px; background: var(--colorCard) !important; border: none !important; &:hover { color: white !important; } } .text-desc{ width: 260px; width: 90%; height: 150px; margin-top: 20px; background-color: rgba(250, 250, 250, 1); border: 1px dashed rgba(220, 220, 220, 1); height: 100px; padding: 10px 20px; color: rgba(94, 94, 94, 1); background-color: #F2F2F7; padding: 20px 30px; color: #333; text-align: left; font-size: 14px; border-radius:5px ; font-size: 12px; border-radius:8px ; } } .upload-center { margin-top:44px ; .upload-info { margin-bottom:20px ; text-align: left; font-weight: bold; font-size: 14px; color: #333333; } .upload-container { position: relative; width: 412px; height: 174px; background-color: #fff; border-radius: 8px; .upload-success,.upload-fail { position: absolute; z-index: 1; width: 100%; height: 174px; top: 0; left: 0; background-color: #fff; font-weight: bold; font-size: 10px; transition: all 1000ms linear 0; -o-transition: all 1000ms linear 0; /*兼容parsto内核*/ -moz-transition: all 1000ms linear 0; /*兼容gecko内核*/ -webkit-transition: all 1000ms linear 0; /*兼容webkit内核*/ } .upload-icon { display: block; margin-top: 32px; margin-bottom:42px ; font-size: 50px; } } .update-center { height: 160px; @@ -494,7 +594,13 @@ margin-bottom: 10px; } .el-button { width: 120px; width: 150px; height: 40px; background: var(--colorCard) !important; border: none !important; &:hover { color: white !important; } } .el-button--small { font-size: 14px; @@ -507,8 +613,47 @@ box-sizing: border-box; flex-direction: column; .el-upload { width: 340px !important; height: 117.87px !important; margin: 28px auto; .el-upload-dragger { width: 100% !important; height: 100% !important; i { display: none !important; } .el-upload__text { color: #828282 !important; margin-top: 52px !important; font-size: 14px !important; } .el-loading-text { font-size: 14px !important; color: #333333 !important; } } } .el-upload.el-upload--text .el-upload-dragger:hover { border-color: var(--colorCard) !important; } em { color: var(--colorCard) !important; } .uploader-btn { margin-top: 15px; width: 150px; height: 40px; margin-top: 158px; margin-bottom:25px ; background: var(--colorCard) !important; border: none !important; border-radius: 25px !important; &:hover { color: white !important; } } } .up-text { @@ -525,6 +670,10 @@ } } .cur-version { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); font-size: 14px; } } @@ -537,7 +686,7 @@ background-color: #f8f8f8; justify-content: space-between; border-radius: 12px; margin-bottom: 10px; margin-bottom: 4px; padding-left:20px ; .name { font-size: 14px; @@ -557,12 +706,12 @@ margin-right: 17px; } .is-checked .el-switch__core{ background-color: #4E97FF !important; background-color: var(--colorCard) !important; border: 1px solid var(--colorCard) !important; } } .save-btn { background-color: #3d68e1; width: 240px; height: 40px; margin: 0 auto; @@ -571,7 +720,14 @@ line-height: 40px; font-size: 14px; margin-top: 20px; background: var(--colorCard) !important; border: none !important; &:hover { color: white !important; } } } } </style>