@中文描述:引用默认资源地址修改 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述:引用默认资源地址修改 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 19e45b2 commit d9ee63dc4cc90dfadca880f117d50eabd4daf0bc 20278 authored on 28 Feb

Showing 1 changed file

Ignore Space Show notes View project/hivuiLogin/views/authorize.vue
<template> <div class="authorize"> <div class="authorize_hd"> <div class="authorize_logo" :style="authorize_logo_style"> <img :src="config.loginLogoImg"> </div> <div class="authorize_text">{{$t('hivuiLogin_authorize_title')}}</div> </div> <div class="authorize_main" :style="bgStyle"> <div class="authorize_box"> <h3>{{$t('hivuiLogin_authorize_box_title')}}</h3> <el-form ref="authorizeForm" label-width="64px"> <el-form-item class="authorize_field" prop="machineCode" :label="$t('hivuiLogin_authorize_machine_code')"> <el-input ref="machineCode" v-model="machineCode" type="text" :placeholder="$t('hivuiLogin_authorize_machine_code_placeholder')" readonly></el-input> </el-form-item> <el-upload v-show="!authorizeUploadSuccess" class="authorizeUpload" :http-request="handleUpload" :before-upload="beforeUpload" :on-change="handleChange" :file-list="fileList" :limit="2" :auto-upload="true" :show-file-list="false" accept=".md"> <el-button size="small" :type="'primary'" :loading="authorizeLoading">{{$t('hivuiLogin_authorize_upload_btn')}}</el-button> </el-upload> <div class="authorize_btn_box"> <el-button size="small" v-show="authorizeUploadSuccess" class="authorize_submit" :loading="authorizeLoading" type="success" @click="goLoginPage" >{{$t('hivuiLogin_authorize_upload_success')+$t('hivuiLogin_authorize_btn_text')}}</el-button> </div> </el-form> <!-- <div class="authorize_mask" v-show="authorizeUploadSuccess"></div> --> <div class="authorize_tips"> <span @click="goLoginPage">{{$t('hivuiLogin_authorize_tiptext2')}}<i class="el-icon-arrow-right"></i></span> </div> </div> </div> <div class="authorize_ft" v-html="config.copyright"></div> </div> </template> <script> import {getMachineCode,uploadCard} from "../api/user"; import _loginLogoImg from "../assets/Logo1.png" import _authorizeBgImg from "../assets/register/bg.png" export default { name: "authorize", data() { return { machineCode: "", fileList: [], // 用来保存文件列表 authorizeLoading: false, authorizeUploadSuccess: false, msgObj:null, config: { title: window.customSysCofig?.loginTitle\|\|this.$t('hivuiLogin_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, authorizeBgImg: window.customSysCofig?.registerBgImg\|\|_authorizeBgImg, copyright: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_main_def_copyright'), }, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: { bgStyle() { return { "background-image": "url(" + this.config.authorizeBgImg + ")", }; }, authorize_logo_style(){ return { "width":(this.config.loginLogoImg_width / 1920) * 100+"vw", "height":(this.config.loginLogoImg_height / 1920) * 100+"vw", } } }, mounted() { getMachineCode().then((res)=>{ this.machineCode=res.dataPack; }); }, methods: { //上传证书 handleUpload() { let me=this; me.authorizeLoading=true; if (this.fileList.length == 0) { this.$message.warning(me.$t('hivuiLogin_authorize_file_empty')); me.authorizeLoading=false; return; // 阻止文件上传 } let formData = new FormData(); formData.append("files", me.fileList[0].raw); uploadCard(formData).then((res) => { me.authorizeLoading=false; if(res.status==200&&res.dataPack&&res.dataPack.time){ me.authorizeUploadSuccess=true; me.msgObj=me.$message({ message: ((res.msg\|\|me.$t('hivuiLogin_authorize_upload_success'))+"<br>"+$t('hivuiLogin_authorize_time')+"："+res.dataPack.time), type: 'success', duration:0, showClose:true, dangerouslyUseHTMLString: true }); /setTimeout(()=>{ location=window.HIVUI_SETTING.loginUrl; },11000);/ } }).catch((err)=>{ me.authorizeLoading=false; }); }, goLoginPage() { this.msgObj&&this.msgObj.close(); this.$router.push("/"); }, // 在上传文件前检查 beforeUpload(file) { }, // 文件上传改变事件 handleChange(file, fileList) { this.fileList = [file]; // 保证只有一个文件在 fileList 中，覆盖旧的文件 }, } }; </script> <style lang="scss" scoped> @function px2vw($px) { @return calc(#{$px} / 1920 100vw); } $headH: px2vw(130); $footH: px2vw(172); .authorize { height: 100%; overflow: hidden; .authorize_hd { height: $headH; display: flex; align-items: center; padding-top: px2vw(30); padding-left: px2vw(15); .authorize_logo { width: px2vw(206); height: px2vw(56); margin-right: px2vw(20); img { height: 100%; width: 100%; } } .authorize_text { font-size: px2vw(22); color: #333; position: relative; padding-left: px2vw(32); &:after { content: ""; display: block; height: px2vw(40); width: px2vw(1); background-color: #7ecef4; position: absolute; top: 0; left: px2vw(10); bottom: 0; margin: auto; } } } .authorize_main { height: calc(100% - #{$headH} - #{$footH}); position: relative; background: url("../assets/register/bg.png") no-repeat center center; background-size: cover; .authorize_box { position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; width: px2vw(500); height: px2vw(300); border-radius: px2vw(3); background-color: #fff; padding: 0 px2vw(40) px2vw(40); h3 { text-align: center; line-height: px2vw(100); font-size: px2vw(24); color: #333; font-weight: bold; } .authorize_field { margin-bottom: px2vw(22); line-height: px2vw(48); ::v-deep.el-input__inner { line-height: px2vw(48); height: px2vw(48); } ::v-deep.el-form-item__content{ line-height: px2vw(50); font-size: px2vw(14); } ::v-deep.el-form-item__error{ padding-top: px2vw(4); } .authorize_pwStrength { margin-top: px2vw(10); } &.authorize_row { ::v-deep.el-form-item__content { display: flex; align-items: center; } } } .authorize_capbtn { width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .authorize_btn_box{ display: flex; justify-content: center; .authorize_submit { height: px2vw(40); line-height: px2vw(40); padding-top: 0; margin: px2vw(0) auto; } } .authorize_mask{ position: absolute; z-index: 9999; height: 60px; width: 100%; left: 0; bottom: 40px; } .authorize_tips { position: absolute; bottom:px2vw(20); right:px2vw(20); padding-top: px2vw(20); span { color: #3486d2; cursor: pointer; } } .authorizeUpload{ display: flex; justify-content: center; ::v-deep.el-upload-list{ height:32px; overflow: hidden; display: flex; flex:1; .el-upload-list__item{ line-height:32px; margin-top:0; flex:0 0 100%; } } } } } .authorize_ft { height: $footH; line-height: $footH; background-color: #e8f1fa; text-align: center; font-size: px2vw(16); color: #999; border-top: px2vw(1) solid #ccc; border-bottom: px2vw(1) solid #ccc; ::v-deep a{ margin-left:5px; color:#0f406c; &:hover{ color:#409eff; } } } } </style> <template> <div class="authorize"> <div class="authorize_hd"> <div class="authorize_logo" :style="authorize_logo_style"> <img :src="config.loginLogoImg"> </div> <div class="authorize_text">{{$t('hivuiLogin_authorize_title')}}</div> </div> <div class="authorize_main" :style="bgStyle"> <div class="authorize_box"> <h3>{{$t('hivuiLogin_authorize_box_title')}}</h3> <el-form ref="authorizeForm" label-width="64px"> <el-form-item class="authorize_field" prop="machineCode" :label="$t('hivuiLogin_authorize_machine_code')"> <el-input ref="machineCode" v-model="machineCode" type="text" :placeholder="$t('hivuiLogin_authorize_machine_code_placeholder')" readonly></el-input> </el-form-item> <el-upload v-show="!authorizeUploadSuccess" class="authorizeUpload" :http-request="handleUpload" :before-upload="beforeUpload" :on-change="handleChange" :file-list="fileList" :limit="2" :auto-upload="true" :show-file-list="false" accept=".md"> <el-button size="small" :type="'primary'" :loading="authorizeLoading">{{$t('hivuiLogin_authorize_upload_btn')}}</el-button> </el-upload> <div class="authorize_btn_box"> <el-button size="small" v-show="authorizeUploadSuccess" class="authorize_submit" :loading="authorizeLoading" type="success" @click="goLoginPage" >{{$t('hivuiLogin_authorize_upload_success')+$t('hivuiLogin_authorize_btn_text')}}</el-button> </div> </el-form> <!-- <div class="authorize_mask" v-show="authorizeUploadSuccess"></div> --> <div class="authorize_tips"> <span @click="goLoginPage">{{$t('hivuiLogin_authorize_tiptext2')}}<i class="el-icon-arrow-right"></i></span> </div> </div> </div> <div class="authorize_ft" v-html="config.copyright"></div> </div> </template> <script> import {getMachineCode,uploadCard} from "../api/user"; import _loginLogoImg from "../assets/Logo1.png" import _authorizeBgImg from "../assets/register/bg.png" export default { name: "authorize", data() { return { machineCode: "", fileList: [], // 用来保存文件列表 authorizeLoading: false, authorizeUploadSuccess: false, msgObj:null, config: { title: window.customSysCofig?.loginTitle\|\|this.$t('hivuiLogin_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, authorizeBgImg: window.customSysCofig?.registerBgImg\|\|_authorizeBgImg, copyright: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_main_def_copyright'), }, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: { bgStyle() { return { "background-image": "url(" + this.config.authorizeBgImg + ")", }; }, authorize_logo_style(){ return { "width":(this.config.loginLogoImg_width / 1920) * 100+"vw", "height":(this.config.loginLogoImg_height / 1920) * 100+"vw", } } }, mounted() { getMachineCode().then((res)=>{ this.machineCode=res.dataPack; }); }, methods: { //上传证书 handleUpload() { let me=this; me.authorizeLoading=true; if (this.fileList.length == 0) { this.$message.warning(me.$t('hivuiLogin_authorize_file_empty')); me.authorizeLoading=false; return; // 阻止文件上传 } let formData = new FormData(); formData.append("files", me.fileList[0].raw); uploadCard(formData).then((res) => { me.authorizeLoading=false; if(res.status==200&&res.dataPack&&res.dataPack.time){ me.authorizeUploadSuccess=true; me.msgObj=me.$message({ message: ((res.msg\|\|me.$t('hivuiLogin_authorize_upload_success'))+"<br>"+$t('hivuiLogin_authorize_time')+"："+res.dataPack.time), type: 'success', duration:0, showClose:true, dangerouslyUseHTMLString: true }); /setTimeout(()=>{ location=window.HIVUI_SETTING.loginUrl; },11000);/ } }).catch((err)=>{ me.authorizeLoading=false; }); }, goLoginPage() { this.msgObj&&this.msgObj.close(); this.$router.push("/"); }, // 在上传文件前检查 beforeUpload(file) { }, // 文件上传改变事件 handleChange(file, fileList) { this.fileList = [file]; // 保证只有一个文件在 fileList 中，覆盖旧的文件 }, } }; </script> <style lang="scss" scoped> @function px2vw($px) { @return calc(#{$px} / 1920 100vw); } $headH: px2vw(130); $footH: px2vw(172); .authorize { height: 100%; overflow: hidden; .authorize_hd { height: $headH; display: flex; align-items: center; padding-top: px2vw(30); padding-left: px2vw(15); .authorize_logo { width: px2vw(206); height: px2vw(56); margin-right: px2vw(20); img { height: 100%; width: 100%; } } .authorize_text { font-size: px2vw(22); color: #333; position: relative; padding-left: px2vw(32); &:after { content: ""; display: block; height: px2vw(40); width: px2vw(1); background-color: #7ecef4; position: absolute; top: 0; left: px2vw(10); bottom: 0; margin: auto; } } } .authorize_main { height: calc(100% - #{$headH} - #{$footH}); position: relative; background: url("../assets/authorize/bg.png") no-repeat center center; background-size: cover; .authorize_box { position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; width: px2vw(500); height: px2vw(300); border-radius: px2vw(3); background-color: #fff; padding: 0 px2vw(40) px2vw(40); h3 { text-align: center; line-height: px2vw(100); font-size: px2vw(24); color: #333; font-weight: bold; } .authorize_field { margin-bottom: px2vw(22); line-height: px2vw(48); ::v-deep.el-input__inner { line-height: px2vw(48); height: px2vw(48); } ::v-deep.el-form-item__content{ line-height: px2vw(50); font-size: px2vw(14); } ::v-deep.el-form-item__error{ padding-top: px2vw(4); } .authorize_pwStrength { margin-top: px2vw(10); } &.authorize_row { ::v-deep.el-form-item__content { display: flex; align-items: center; } } } .authorize_capbtn { width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .authorize_btn_box{ display: flex; justify-content: center; .authorize_submit { height: px2vw(40); line-height: px2vw(40); padding-top: 0; margin: px2vw(0) auto; } } .authorize_mask{ position: absolute; z-index: 9999; height: 60px; width: 100%; left: 0; bottom: 40px; } .authorize_tips { position: absolute; bottom:px2vw(20); right:px2vw(20); padding-top: px2vw(20); span { color: #3486d2; cursor: pointer; } } .authorizeUpload{ display: flex; justify-content: center; ::v-deep.el-upload-list{ height:32px; overflow: hidden; display: flex; flex:1; .el-upload-list__item{ line-height:32px; margin-top:0; flex:0 0 100%; } } } } } .authorize_ft { height: $footH; line-height: $footH; background-color: #e8f1fa; text-align: center; font-size: px2vw(16); color: #999; border-top: px2vw(1) solid #ccc; border-bottom: px2vw(1) solid #ccc; ::v-deep a{ margin-left:5px; color:#0f406c; &:hover{ color:#409eff; } } } } </style>

Ignore Space Show notes View

project/hivuiLogin/views/authorize.vue

<template>
  <div class="authorize">
    <div class="authorize_hd">
      <div class="authorize_logo" :style="authorize_logo_style">
        <img :src="config.loginLogoImg">
      </div>
      <div class="authorize_text">{{$t('hivuiLogin_authorize_title')}}</div>
    </div>
    <div class="authorize_main" :style="bgStyle">
      <div class="authorize_box">
        <h3>{{$t('hivuiLogin_authorize_box_title')}}</h3>
        <el-form ref="authorizeForm" label-width="64px">
          <el-form-item class="authorize_field" prop="machineCode" :label="$t('hivuiLogin_authorize_machine_code')">
            <el-input ref="machineCode" v-model="machineCode" type="text" :placeholder="$t('hivuiLogin_authorize_machine_code_placeholder')" readonly></el-input>
          </el-form-item>
          <el-upload
            v-show="!authorizeUploadSuccess"
            class="authorizeUpload"
            :http-request="handleUpload"
            :before-upload="beforeUpload"
            :on-change="handleChange"
            :file-list="fileList"
            :limit="2"
            :auto-upload="true"
            :show-file-list="false"
            accept=".md">
            <el-button size="small" :type="'primary'" :loading="authorizeLoading">{{$t('hivuiLogin_authorize_upload_btn')}}</el-button>
          </el-upload>
          <div class="authorize_btn_box">
            <el-button
              size="small"
              v-show="authorizeUploadSuccess"
              class="authorize_submit"
              :loading="authorizeLoading"
              type="success"
              @click="goLoginPage"
            >{{$t('hivuiLogin_authorize_upload_success')+$t('hivuiLogin_authorize_btn_text')}}</el-button>
          </div>
          
        </el-form>
        
        <div class="authorize_tips">
          <span @click="goLoginPage">{{$t('hivuiLogin_authorize_tiptext2')}}<i class="el-icon-arrow-right"></i></span>
        </div>
      </div>
    </div>
    <div class="authorize_ft" v-html="config.copyright"></div>
  </div>
</template>

Show line notes below