| src/pages/Register/Register.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/forgetPass/forgetPass.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/inherit/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/knowledgeBase/knowledgeBase.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/static/initialize.css | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/pages/Register/Register.vue
@@ -1,366 +1,464 @@ <template> <view class="container flex flex-center" style="align-items: flex-start;"> <view class="repository relative"> <view class="Ttop flex flex-center flex-wrap" style="flex-direction: column;"> <view class=""></view> <view class="" ref="Rtop"> <text class="login"></text> <text style="font-size: .36rem;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">中国医学人物知识库</text> </view> <view></view> </view> <!-- 注册用户 v-if="isRegister"--> <el-card> <view class="LoginTop" style="display: flex; justify-content: space-between;margin-bottom: .47rem;align-items: center;"> <!-- <view class="" style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户注册</view> --> <view class="LoginBg"></view> <view class="" @click="BacktoLogin" style="cursor: pointer;font-size: .14rem;color: #244A7B;font-weight: normal;"> 已有账号？返回登录 </view> </view> <el-form :hide-required-asterisk="true" ref="formLogin" label-position="right" :rules="rules" :model="registerData"> <el-form-item label="登录账号" prop="loginID"> <el-input v-model="registerData.loginID" placeholder="由字母或数字组合3-15个字符组成"></el-input> </el-form-item> <el-form-item label="登录密码" prop="pass"> <el-input type="password" v-model="registerData.pass" placeholder="字母、数字或特殊符号组成(6-10)个字符"></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="registerData.checkPass" placeholder="必须与密码一致"></el-input> </el-form-item> <el-form-item label="手机/邮箱" prop="cellphoneORmailbox"> <el-input v-model="registerData.cellphoneORmailbox" placeholder="请填写正确的手机或电子邮箱地址"></el-input> </el-form-item> <el-form-item label="验证码" prop="verifyCode"> <view class="verifyCode relative"> <el-input v-model="registerData.verifyCode" placeholder="请输入验证码"></el-input> <view @click="verifyCodeClick" class="yzm" style="position: absolute;right: 0%;top: 0%;color: #244A7B;font-size: .14rem;font-weight: 500;"> 获取验证码</view> </view> </el-form-item> <el-form-item class="btn" style="margin-bottom: .09rem;"> <el-button class="font-family" style="margin-top: .22rem; font-weight:900;font-size: .3rem; width: 100%;background-color:#244A7B;color: #fff;padding: .16rem;" size="medium" @click="Login('formLogin')">注册</el-button> </el-form-item> <view class="asdf" style="font-size: .12rem;color: #9E9E9E;font-weight: 500; text-align: center;line-height: normal;margin-bottom: .19rem;"> 用户注册即代表同意 <span class="cursor" @click="termOfServiceClick(1)">《服务条款》</span> 和<span class="cursor" @click="termOfServiceClick(2)">《用户隐私保护和个人信息条款》</span> </view> </el-form> </el-card> </view> <view class="hua"></view> <!-- 底部人物背景图左侧 --> <view class="fff"></view> <!-- 底部花的背景图右侧 --> <view class="rrr"></view> <Footer1 /> </view> <view class="container flex flex-center" style="align-items: flex-start"> <view class="repository relative"> <view class="Ttop flex flex-center flex-wrap" style="flex-direction: column" > <view class=""></view> <view class="" ref="Rtop"> <text class="login"></text> <text style=" font-size: 0.36rem; letter-spacing: 4rpx; vertical-align: middle; font-family: cursive; font-weight: bold; " >中国医学人物知识库</text > </view> <view></view> </view> <!-- 注册用户 v-if="isRegister"--> <el-card> <view class="LoginTop" style=" display: flex; justify-content: space-between; margin-bottom: 0.47rem; align-items: center; " > <!-- <view class="" style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户注册</view> --> <view class="LoginBg"></view> <view class="" @click="BacktoLogin" style=" cursor: pointer; font-size: 0.14rem; color: #244a7b; font-weight: normal; " > 已有账号？返回登录 </view> </view> <el-form :hide-required-asterisk="true" ref="formLogin" label-position="right" :rules="rules" :model="registerData" > <el-form-item label="登录账号" prop="loginID"> <el-input v-model="registerData.loginID" placeholder="由字母或数字组合3-15个字符组成" ></el-input> </el-form-item> <el-form-item label="登录密码" prop="pass"> <el-input type="password" v-model="registerData.pass" placeholder="字母、数字或特殊符号组成(6-10)个字符" ></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="registerData.checkPass" placeholder="必须与密码一致" ></el-input> </el-form-item> <el-form-item label="手机号" prop="cellphoneORmailbox"> <el-input v-model="registerData.cellphoneORmailbox" placeholder="请填写正确的手机" ></el-input> </el-form-item> <el-form-item label="验证码" prop="verifyCode"> <view class="verifyCode relative"> <el-input v-model="registerData.verifyCode" placeholder="请输入验证码" ></el-input> <view @click="verifyCodeClick" class="yzm" style=" position: absolute; right: 0%; top: 0%; color: #244a7b; font-size: 0.14rem; font-weight: 500; " > {{ countdown > 0 ? `${countdown}秒后重新获取` : "获取验证码" }}</view > </view> </el-form-item> <el-form-item class="btn" style="margin-bottom: 0.09rem"> <el-button class="font-family" style=" margin-top: 0.22rem; font-weight: 900; font-size: 0.3rem; width: 100%; background-color: #244a7b; color: #fff; padding: 0.16rem; " size="medium" @click="Login('formLogin')" >注册</el-button > </el-form-item> <view class="asdf" style=" font-size: 0.12rem; color: #9e9e9e; font-weight: 500; text-align: center; line-height: normal; margin-bottom: 0.19rem; " > 用户注册即代表同意 <span class="cursor" @click="termOfServiceClick(1)" >《服务条款》</span > 和<span class="cursor" @click="termOfServiceClick(2)" >《用户隐私保护和个人信息条款》</span > </view> </el-form> </el-card> </view> <view class="hua"></view> <!-- 底部人物背景图左侧 --> <view class="fff"></view> <!-- 底部花的背景图右侧 --> <view class="rrr"></view> <Footer1 /> </view> </template> <script> import { getaddLogin, getverifyCode } from '@/api/index.js' import { encryptAES } from '@/utils/Crypto.js' import { nextTick } from "vue"; import Footer1 from '@/components/footer/footer.vue' export default { components: { Footer1 }, data() { // 密码 var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.registerData.checkPass !== '') { this.$nextTick(() => { this.$refs.formLogin.validateField('checkPass'); }); } callback(); } }; // 确认密码 var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.registerData.pass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { // 用户注册 isRegister: false, // 用户登录 isLogin: true, // 修改密码 isAmendPass: false, // 重置密码 isResetPass: false, // 注册用户账号的校验 rules: { loginID: [{ required: true, message: '请输入登录账号', trigger: 'blur' }, { pattern: /^[a-zA-Z0-9]{3,15}$/, message: '请输入3-15个字符的字母或数字', trigger: 'blur' } // 自定义校验规则，使用正则表达式 ], pass: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 10, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }, { validator: validatePass, trigger: 'blur' } ], checkPass: [{ validator: validatePass2, trigger: 'blur' }], cellphoneORmailbox: [{ required: true, message: '请输入手机号或邮箱', trigger: 'blur' }, { validator: this.validateContact, trigger: 'blur' } ], verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }] }, // 登录注册框 loginTrue: true, Rtop1: 0, value: 'sdfdsf', // 注册用户对应的数据 registerData: { loginID: '', pass: '', checkPass: '', cellphoneORmailbox: '', verifyCode: '' }, // 登录用户账号 loginData: { // 账号 loginID: '', pass: '' }, // 重置密码 resetDataPass: { cellphoneORmailbox: '', verifyCode: "", newPass: "", checkPass: "" }, // 修改密码 amendDataPass: { loginID: '', originalPass: "", newPass: "", checkPass: "" }, // 书籍数据 listData: [{ name: '中医人物数据库', id: 1, }, { name: '世医医家数据库', id: 2, }, { name: '中医学术流派', id: 3, }, { name: '中医地域医谱', id: 4, }, { name: '中医医事制度', id: 5, }, import { getaddLogin, getverifyCode } from "@/api/index.js"; import { encryptAES } from "@/utils/Crypto.js"; import { nextTick } from "vue"; import Footer1 from "@/components/footer/footer.vue"; export default { components: { Footer1, }, data() { // 密码 var validatePass = (rule, value, callback) => { if (value === "") { callback(new Error("请输入密码")); } else { if (this.registerData.checkPass !== "") { this.$nextTick(() => { this.$refs.formLogin.validateField("checkPass"); }); } callback(); } }; // 确认密码 var validatePass2 = (rule, value, callback) => { if (value === "") { callback(new Error("请再次输入密码")); } else if (value !== this.registerData.pass) { callback(new Error("两次输入密码不一致!")); } else { callback(); } }; return { //验证码倒计时 countdown: 0, // 用户注册 isRegister: false, // 用户登录 isLogin: true, // 修改密码 isAmendPass: false, // 重置密码 isResetPass: false, // 注册用户账号的校验 rules: { loginID: [ { required: true, message: "请输入登录账号", trigger: "blur", }, { pattern: /^[a-zA-Z0-9]{3,15}$/, message: "请输入3-15个字符的字母或数字", trigger: "blur", }, // 自定义校验规则，使用正则表达式 ], pass: [ { required: true, message: "请输入密码", trigger: "blur", }, { min: 6, max: 10, message: "密码长度在 6 到 12 个字符", trigger: "blur", }, { validator: validatePass, trigger: "blur", }, ], checkPass: [ { validator: validatePass2, trigger: "blur", }, ], cellphoneORmailbox: [ { required: true, message: "请输入手机", trigger: "blur", }, { validator: this.validateContact, trigger: "blur", }, ], verifyCode: [ { required: true, message: "请输入验证码", trigger: "blur", }, ], }, // 登录注册框 loginTrue: true, Rtop1: 0, value: "sdfdsf", // 注册用户对应的数据 registerData: { loginID: "", pass: "", checkPass: "", cellphoneORmailbox: null, verifyCode: "", }, // 登录用户账号 loginData: { // 账号 loginID: "", pass: "", }, // 重置密码 resetDataPass: { cellphoneORmailbox: null, verifyCode: "", newPass: "", checkPass: "", }, // 修改密码 amendDataPass: { loginID: "", originalPass: "", newPass: "", checkPass: "", }, // 书籍数据 listData: [ { name: "中医人物数据库", id: 1, }, { name: "世医医家数据库", id: 2, }, { name: "中医学术流派", id: 3, }, { name: "中医地域医谱", id: 4, }, { name: "中医医事制度", id: 5, }, ], }; }, onLoad() { uni.getSystemInfo({ success: function (info) { // console.log('屏幕的宽度：' + info.windowWidth); // console.log('屏幕的高度：' + info.windowHeight); }, }); }, mounted() { this.getElementWidth(); }, methods: { // 服务条款 termOfServiceClick(number) { // console.log(number); if (number == 1) { console.log("服务条款"); window.open(`#/pages/userAgreement/userAgreement`); // uni.navigateTo({ // url: '/pages/userAgreement/userAgreement' // }) } else if (number == 2) { window.open(`#/pages/userAgreement/userAgreement`); console.log("用户隐私保护和个人信息条款"); } }, // 已有账号？返回登录 BacktoLogin() { uni.redirectTo({ url: "/pages/Login/Login", }); }, // 获取验证码 async verifyCodeClick() { if (!this.registerData.cellphoneORmailbox) { this.$message({ message: "请输入手机！", type: "warning", }); ] } }, onLoad() { uni.getSystemInfo({ success: function(info) { // console.log('屏幕的宽度：' + info.windowWidth); // console.log('屏幕的高度：' + info.windowHeight); } }); }, mounted() { this.getElementWidth(); }, methods: { // 服务条款 termOfServiceClick(number) { // console.log(number); if (number == 1) { console.log('服务条款'); window.open(`#/pages/userAgreement/userAgreement`) // uni.navigateTo({ // url: '/pages/userAgreement/userAgreement' // }) } else if (number == 2) { window.open(`#/pages/userAgreement/userAgreement`) console.log('用户隐私保护和个人信息条款'); } }, // 已有账号？返回登录 BacktoLogin() { uni.redirectTo({ url: '/pages/Login/Login' }) }, // 获取验证码 async verifyCodeClick() { let Obj = { communicateParam: this.registerData.cellphoneORmailbox, } console.log(Obj); let code = await getverifyCode(Obj) console.log(code, '获取验证码'); // console.log('获取验证码'); }, // 验证码校验 validateVerificationCode(rule, value, callback) { if (value !== '123456') { // callback(new Error('验证码错误')); callback() } else { callback(); } }, // 手机号/或者邮箱 validateContact(rule, value, callback) { const regPhone = /^1[0-9]{10}$/; const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; console.log(value, regPhone.test(value), regEmail.test(value)); if (regPhone.test(value) || regEmail.test(value)) { callback(); // 校验通过 } else { callback(new Error('请输入正确的手机号或邮箱')); // 校验失败 } }, getElementWidth() { this.$nextTick(() => { var width = this.$refs.Rtop.$el.clientWidth; this.Rtop1 = width + 50; console.log('Element width:', width); }) }, // 用户注册 async Login(formName) { console.log(formName); let Obj = { username: this.registerData.loginID, password: encryptAES(this.registerData.pass), communicateParam: this.registerData.cellphoneORmailbox, verifyCode: this.registerData.verifyCode, } this.$refs[formName].validate(async (valid) => { if (valid) { // alert('submit!'); console.log('sdfds'); await getaddLogin(Obj).then(res => { console.log(res, '注册成功'); if(res.success==true){ uni.showToast({ title: res.errorText, icon: 'success' }); uni.navigateTo({ url: '/pages/Login/Login' }) }else{ uni.showToast({ title: res.errorText, icon: 'error' }); } }) // encryptAES // uni.navigateTo({ // url: '/pages/Login/Login' // }) } else { console.log('error submit!!'); return false; } }); return false; } if (this.countdown > 0) { return; } let Obj = { communicateParam: this.registerData.cellphoneORmailbox, }; this.countdown = 60; const intervalId = setInterval(() => { if (this.countdown > 0) { this.countdown -= 1; } else { clearInterval(intervalId); } }, 1000); let code = await getverifyCode(Obj); // console.log(Obj, '用户登录的登录按钮'); }, // 手机号/或者邮箱 validateContact(rule, value, callback) { const regPhone = /^1[0-9]{10}$/; const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; console.log(value, regPhone.test(value), regEmail.test(value)); if (regPhone.test(value) || regEmail.test(value)) { callback(); // 校验通过 } else { callback(new Error("请输入正确的手机号")); // 校验失败 } }, getElementWidth() { this.$nextTick(() => { var width = this.$refs.Rtop.$el.clientWidth; this.Rtop1 = width + 50; console.log("Element width:", width); }); }, // 用户注册 async Login(formName) { console.log(formName); let Obj = { username: this.registerData.loginID, password: encryptAES(this.registerData.pass), communicateParam: this.registerData.cellphoneORmailbox, verifyCode: this.registerData.verifyCode, }; this.$refs[formName].validate(async (valid) => { if (valid) { // alert('submit!'); console.log("sdfds"); await getaddLogin(Obj).then((res) => { console.log(res, "注册成功"); if (res.success == true) { uni.showToast({ title: res.errorText, icon: "success", }); uni.navigateTo({ url: "/pages/Login/Login", }); } else { uni.showToast({ title: res.errorText, icon: "error", }); } }); // encryptAES // uni.navigateTo({ // url: '/pages/Login/Login' // }) } else { console.log("error submit!!"); return false; } }); // let res = await getaddLogin(Obj) // console.log('sdfdsfs', res); // console.log(Obj, '用户登录的登录按钮'); }, } } // let res = await getaddLogin(Obj) // console.log('sdfdsfs', res); }, }, }; </script> <style scoped> @media screen and (max-width:1366px) { ::v-deep .el-card { top: 50% !important; } @media screen and (max-width: 1366px) { ::v-deep .el-card { top: 50% !important; } ::v-deep .el-input__inner { height: .44rem; } ::v-deep .el-input__inner { height: 0.44rem; } ::v-deep .el-card { padding: .2rem 0 !important; } ::v-deep .el-card { padding: 0.2rem 0 !important; } .LoginBg { margin: 0 !important; } .LoginBg { margin: 0 !important; } .hua { height: 5rem !important; } } .hua { height: 5rem !important; } } @media screen and (min-width:1366px) and (max-width:1920px) { /* ::v-deep .el-card__body { @media screen and (min-width: 1366px) and (max-width: 1920px) { /* ::v-deep .el-card__body { padding: 0 .58rem !important; } @@ -383,69 +481,68 @@ .hua { height: 5rem !important; } */ .LoginBg { margin: 0 !important; height: .3rem !important; } .LoginBg { margin: 0 !important; height: 0.3rem !important; } ::v-deep .el-card { top: 70% !important; padding: 0 !important; } ::v-deep .el-card { top: 70% !important; padding: 0 !important; } ::v-deep .el-card__body { padding: .25rem .5rem !important; } ::v-deep .el-card__body { padding: 0.25rem 0.5rem !important; } ::v-deep .el-form { padding-left: .1rem !important; } ::v-deep .el-form { padding-left: 0.1rem !important; } ::v-deep .el-form-item__error { font-size: .13rem !important; } ::v-deep .el-form-item__error { font-size: 0.13rem !important; } ::v-deep .el-input__inner { height: .35rem !important; } ::v-deep .el-input__inner { height: 0.35rem !important; } .hua { height: 5rem !important; } .hua { height: 5rem !important; } .LoginTop { margin-bottom: .25rem !important; } .LoginTop { margin-bottom: 0.25rem !important; } .yzm { top: 15% !important; } .yzm { top: 15% !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .rrr { width: 2rem !important; height: 2.5rem !important; } .rrr { width: 2rem !important; height: 2.5rem !important; } .btn ::v-deep .el-button { margin-top: 0.2rem !important; /* font-size: 0.2rem !important; .btn ::v-deep .el-button { margin-top: 0.2rem !important; /* font-size: 0.2rem !important; width: 100%; padding: 0.12rem !important; */ } } .asdf { margin-bottom: .1rem !important; } } .asdf { margin-bottom: 0.1rem !important; } } @media screen and (min-width: 1920px) and (max-width:2560px) { /* ::v-deep .el-card { @media screen and (min-width: 1920px) and (max-width: 2560px) { /* ::v-deep .el-card { top: 80% !important; } @@ -522,129 +619,128 @@ ::v-deep .el-input__inner { height: .35rem !important; } */ .LoginBg { margin: 0 !important; height: .3rem !important; } .LoginBg { margin: 0 !important; height: 0.3rem !important; } ::v-deep .el-card { top: 70% !important; padding: 0 !important; } ::v-deep .el-card { top: 70% !important; padding: 0 !important; } ::v-deep .el-card__body { padding: .25rem .5rem !important; } ::v-deep .el-card__body { padding: 0.25rem 0.5rem !important; } ::v-deep .el-form { padding-left: .1rem !important; } ::v-deep .el-form { padding-left: 0.1rem !important; } ::v-deep .el-form-item__error { font-size: .13rem !important; } ::v-deep .el-form-item__error { font-size: 0.13rem !important; } ::v-deep .el-input__inner { height: .35rem !important; } ::v-deep .el-input__inner { height: 0.35rem !important; } .hua { height: 5rem !important; } .hua { height: 5rem !important; } .LoginTop { margin-bottom: .25rem !important; } .LoginTop { margin-bottom: 0.25rem !important; } .yzm { top: 15% !important; } .yzm { top: 15% !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .rrr { width: 2rem !important; height: 2.5rem !important; } .rrr { width: 2rem !important; height: 2.5rem !important; } .btn ::v-deep .el-button { margin-top: 0.2rem !important; /* font-size: 0.2rem !important; .btn ::v-deep .el-button { margin-top: 0.2rem !important; /* font-size: 0.2rem !important; width: 100%; padding: 0.12rem !important; */ } } .asdf { margin-bottom: .1rem !important; } } .asdf { margin-bottom: 0.1rem !important; } } @media screen and (min-width:2560px)and (max-width:3840px) { .LoginBg { margin: 0 !important; height: .3rem !important; } @media screen and (min-width: 2560px) and (max-width: 3840px) { .LoginBg { margin: 0 !important; height: 0.3rem !important; } ::v-deep .el-card { top: 70% !important; padding: 0 !important; } ::v-deep .el-card { top: 70% !important; padding: 0 !important; } ::v-deep .el-card__body { padding: .25rem .5rem !important; } ::v-deep .el-card__body { padding: 0.25rem 0.5rem !important; } ::v-deep .el-form { padding-left: .1rem !important; } ::v-deep .el-form { padding-left: 0.1rem !important; } ::v-deep .el-form-item__error { font-size: .13rem !important; } ::v-deep .el-form-item__error { font-size: 0.13rem !important; } ::v-deep .el-input__inner { height: .35rem !important; } ::v-deep .el-input__inner { height: 0.35rem !important; } .hua { height: 5rem !important; } .hua { height: 5rem !important; } .LoginTop { margin-bottom: .25rem !important; } .LoginTop { margin-bottom: 0.25rem !important; } .yzm { top: 15% !important; } .yzm { top: 15% !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .rrr { width: 2rem !important; height: 2.5rem !important; } .rrr { width: 2rem !important; height: 2.5rem !important; } .btn ::v-deep .el-button { margin-top: 0.2rem !important; /* font-size: 0.2rem !important; .btn ::v-deep .el-button { margin-top: 0.2rem !important; /* font-size: 0.2rem !important; width: 100%; padding: 0.12rem !important; */ } } .asdf { margin-bottom: .1rem !important; } .asdf { margin-bottom: 0.1rem !important; } } } /* @media screen and (max-width: 1366px){ /* @media screen and (max-width: 1366px){ ::v-deep .el-card{ top: 60% !important; } @@ -659,9 +755,9 @@ } */ /* /* 在屏幕宽度超过 1440px 时的样式设置 */ /* @media screen and (min-width: 1441px) { /* @media screen and (min-width: 1441px) { ::v-deep .el-card { top: 80% !important; } @@ -689,209 +785,195 @@ } } */ .LoginBg { width: 1.2rem; height: 0.37rem; background: url(@/static/image/用户注册.png) no-repeat 0 0; background-size: 100% 100%; /* border: 10px solid red; */ } .LoginBg { width: 1.2rem; height: .37rem; background: url(@/static/image/用户注册.png) no-repeat 0 0; background-size: 100% 100%; /* border: 10px solid red; */ ::v-deep .el-card { border-radius: 0; width: 5.42rem; /* height: 5.65rem; */ position: absolute; top: 80%; } } ::v-deep .el-card__body { padding: 0.175rem 0.58rem; } .btn >>> .el-form-item__content { margin-left: 0 !important; } ::v-deep .el-card { border-radius: 0; width: 5.42rem; /* height: 5.65rem; */ position: absolute; top: 80%; } ::v-deep .el-form-item__content { margin-left: 0 !important; flex: 1; } ::v-deep .el-card__body { padding: .175rem .58rem; } ::v-deep .el-input__inner { border: none; border-bottom: 1px solid #2d476a; border-radius: 0; padding: 0; height: 0.4rem; line-height: 0.4rem; font-size: 0.14rem; } .btn>>>.el-form-item__content { margin-left: 0 !important; ::v-deep .el-form-item__error { /* display: none; */ font-size: 0.12rem; } } ::v-deep .input.invalid:focus { border-color: #2d476a !important; } ::v-deep .el-form-item__content { margin-left: 0 !important; flex: 1; } ::v-deep .el-input__inner:invalid { border-color: #2d476a !important; } ::v-deep .el-input__inner { border: none; border-bottom: 1px solid #2d476a; border-radius: 0; padding: 0; height: .4rem; line-height: .4rem; font-size: .14rem; } ::v-deep .el-form-item__label { min-width: 0.6rem; padding: 0; color: #244a7b; font-size: 0.14rem; font-weight: 500; margin-right: 0.29rem; display: flex; align-items: center; text-align: right; } ::v-deep .el-form-item__error { /* display: none; */ font-size: .12rem; } ::v-deep .el-form-item { margin-bottom: 0.22rem; display: flex; } ::v-deep .input.invalid:focus { border-color: #2d476a !important; } .ss1 { background-repeat: no-repeat; background-size: 100% 100%; width: 40rpx; height: 40rpx; background-size: 100% 100%; } ::v-deep .el-input__inner:invalid { border-color: #2d476a !important; } .s1 { background-image: url(@/static/image/search.png); } .s2 { background-image: url(@/static/image/question.png); } ::v-deep .el-form-item__label { min-width: .6rem; padding: 0; color: #244A7B; font-size: .14rem; font-weight: 500; margin-right: .29rem; display: flex; align-items: center; text-align: right; } .s3 { background-image: url(@/static/image/question.png); } ::v-deep .el-form-item { margin-bottom: .22rem; display: flex; } .container { background: url(@/static/image/bg1.png); width: 100vw; height: 100vh; .ss1 { background-repeat: no-repeat; background-size: 100% 100%; width: 40rpx; height: 40rpx; background-size: 100% 100%; } color: #fff; .s1 { background-image: url(@/static/image/search.png); .repository { width: 100% !important; /* margin-top: 19px; */ /* height: 68%; */ display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .Ttop { margin-top: 0.38rem; margin-bottom: 1.22rem; } .s2 { background-image: url(@/static/image/question.png); } .r-top { font-size: 40rpx !important; margin: 10rpx 0; } } } .s3 { background-image: url(@/static/image/question.png); } .login { width: 0.52rem; height: 0.52rem; display: inline-block; vertical-align: middle; margin-right: 0.19rem; background: url(@/static/image/logo.png) no-repeat 0 0; background-size: 100% 100%; } .container { background: url(@/static/image/bg1.png); width: 100vw; height: 100vh; .rrr { position: absolute; right: 0.53rem; bottom: 0.36rem; width: 2.5rem; height: 3.07rem; opacity: 1; background: url(@/static/image/bg4.png); background-size: 100% 100%; } color: #fff; .hua { width: 13.81rem; height: 5.965rem; position: absolute; background: url(@/static/image/bg3.png) no-repeat 0 0; background-size: 100% 100%; } .repository { width: 100% !important; /* margin-top: 19px; */ /* height: 68%; */ display: flex; flex-direction: column; justify-content: space-around; align-items: center; /* 底部人物背景图 */ .fff { background: url(@/static/image/bg2.png) no-repeat 0 0; background-size: 100% 100%; width: 2.74rem; height: 4.52rem; position: fixed; bottom: 0; z-index: 9999999999999; left: 0; } .Ttop { margin-top: .38rem; margin-bottom: 1.22rem; } ::v-deep .uni-easyinput__content { border-radius: 30rpx !important; /* height: 52rpx; */ } .r-top { font-size: 40rpx !important; margin: 10rpx 0; } } .secretary { width: 1300rpx !important; height: 50rpx; /* height: 80%; */ /* flex-wrap: wrap; */ padding: 0 20px; text-align: center; } li { background-color: #fff; color: black; height: 600rpx; display: flex; justify-content: space-between; flex-direction: column; align-items: center; border: 1rpx solid #fff; padding: 50rpx 65rpx; /* padding: 58rpx 128rpx 88rpx; */ text-align: center; background: #ebf4ff; } } .login { width: .52rem; height: .52rem; display: inline-block; vertical-align: middle; margin-right: .19rem; background: url(@/static/image/logo.png) no-repeat 0 0; background-size: 100% 100%; } .rrr { position: absolute; right: .53rem; bottom: .36rem; width: 2.5rem; height: 3.07rem; opacity: 1; background: url(@/static/image/bg4.png); background-size: 100% 100%; } .hua { width: 13.81rem; height: 5.965rem; position: absolute; background: url(@/static/image/bg3.png) no-repeat 0 0; background-size: 100% 100%; } /* 底部人物背景图 */ .fff { background: url(@/static/image/bg2.png) no-repeat 0 0; background-size: 100% 100%; width: 2.74rem; height: 4.52rem; position: fixed; bottom: 0; z-index: 9999999999999; left: 0; } ::v-deep .uni-easyinput__content { border-radius: 30rpx !important; /* height: 52rpx; */ } .secretary { width: 1300rpx !important; height: 50rpx; /* height: 80%; */ /* flex-wrap: wrap; */ padding: 0 20px; text-align: center; li { background-color: #fff; color: black; height: 600rpx; display: flex; justify-content: space-between; flex-direction: column; align-items: center; border: 1rpx solid #fff; padding: 50rpx 65rpx; /* padding: 58rpx 128rpx 88rpx; */ text-align: center; background: #EBF4FF; } } .Bbottom { display: flex; justify-content: center; } </style> .Bbottom { display: flex; justify-content: center; } </style> src/pages/forgetPass/forgetPass.vue
@@ -1,281 +1,365 @@ <template> <view class="container flex flex-center" style="align-items: flex-start;"> <view class="repository relative"> <view class="Ttop flex flex-center flex-wrap" style="flex-direction: column;"> <view class=""></view> <view class="" ref="Rtop"> <text class="login"></text> <text style="font-size: .36rem;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">中国医学人物知识库</text> </view> <view></view> </view> <!-- 重置密码 --> <el-card> <view class="LoginTop" style="display: flex; justify-content: space-between;margin-bottom: .47rem;align-items: center;"> <!-- <view class="" style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户注册</view> --> <view class="LoginBg"></view> <view class="" @click="BacktoLogin" style="cursor: pointer;font-size: .14rem;color: #244A7B;font-weight: normal;"> 返回登录 </view> </view> <el-form :hide-required-asterisk="true" ref="formLogin2" label-position="right" :rules="rules" :model="resetDataPass"> <el-form-item label="手机/邮箱" prop="cellphoneORmailbox"> <el-input v-model="resetDataPass.cellphoneORmailbox"></el-input> </el-form-item> <el-form-item label="验证码" prop="verifyCode"> <view class="verifyCode relative"> <el-input v-model="resetDataPass.verifyCode"></el-input> <view @click="verifyCodeClick" class="yzm" style="position: absolute;right: 0%;top: 0%;color: #244A7B;font-size: .14rem;font-weight: 500;"> 获取验证码</view> </view> </el-form-item> <el-form-item label="新密码" prop="newPass"> <el-input type="password" v-model="resetDataPass.newPass"></el-input> </el-form-item> <el-form-item label="确认新密码" prop="checkPass"> <el-input type="password" v-model="resetDataPass.checkPass"></el-input> </el-form-item> <el-form-item class="btn"> <el-button class="font-family" style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;" size="medium" @click="Login2('formLogin2')">重置密码</el-button> </el-form-item> </el-form> </el-card> <view class="container flex flex-center" style="align-items: flex-start"> <view class="repository relative"> <view class="Ttop flex flex-center flex-wrap" style="flex-direction: column" > <view class=""></view> <view class="" ref="Rtop"> <text class="login"></text> <text style=" font-size: 0.36rem; letter-spacing: 4rpx; vertical-align: middle; font-family: cursive; font-weight: bold; " >中国医学人物知识库</text > </view> <view></view> </view> <!-- 重置密码 --> <el-card> <view class="LoginTop" style=" display: flex; justify-content: space-between; margin-bottom: 0.47rem; align-items: center; " > <!-- <view class="" style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户注册</view> --> <view class="LoginBg"></view> <view class="" @click="BacktoLogin" style=" cursor: pointer; font-size: 0.14rem; color: #244a7b; font-weight: normal; " > 返回登录 </view> </view> <el-form :hide-required-asterisk="true" ref="formLogin2" label-position="right" :rules="rules" :model="resetDataPass" > <el-form-item label="手机" prop="cellphoneORmailbox"> <el-input v-model="resetDataPass.cellphoneORmailbox"></el-input> </el-form-item> <el-form-item label="验证码" prop="verifyCode"> <view class="verifyCode relative"> <el-input v-model="resetDataPass.verifyCode"></el-input> <view @click="verifyCodeClick" class="yzm" style=" position: absolute; right: 0%; top: 0%; color: #244a7b; font-size: 0.14rem; font-weight: 500; " > {{ countdown > 0 ? `${countdown}秒后重新获取` : "获取验证码" }}</view > </view> </el-form-item> <el-form-item label="新密码" prop="newPass"> <el-input type="password" v-model="resetDataPass.newPass" ></el-input> </el-form-item> <el-form-item label="确认新密码" prop="checkPass"> <el-input type="password" v-model="resetDataPass.checkPass" ></el-input> </el-form-item> <el-form-item class="btn"> <el-button class="font-family" style=" margin-top: 30rpx; font-weight: 900; font-size: 30rpx; width: 100%; background-color: #244a7b; color: #fff; padding: 30rpx; " size="medium" @click="Login2('formLogin2')" >重置密码</el-button > </el-form-item> </el-form> </el-card> </view> <view class="hua"></view> <!-- 底部人物背景图左侧 --> <view class="fff"></view> <!-- 底部花的背景图右侧 --> <view class="rrr"></view> </view> <view class="hua"></view> <!-- 底部人物背景图左侧 --> <view class="fff"></view> <!-- 底部花的背景图右侧 --> <view class="rrr"></view> <Footer1 /> </view> <Footer1 /> </view> </template> <script> import { getRestPassword, getverifyCode } from '@/api/index.js' import { encryptAES } from '@/utils/Crypto.js' import { nextTick } from "vue"; import Footer1 from '@/components/footer/footer.vue' import { Message } from 'element-ui' export default { components: { Footer1 }, data() { // 密码 var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.resetDataPass.checkPass !== '') { this.$nextTick(() => { this.$refs.formLogin.validateField('checkPass'); }); } callback(); } }; // 确认密码 var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.resetDataPass.newPass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { // 用户注册 isRegister: false, // 用户登录 isLogin: true, // 修改密码 isAmendPass: false, // 重置密码 isResetPass: false, // 注册用户账号的校验 rules: { loginID: [{ required: true, message: '请输入登录账号', trigger: 'blur' }], newPass: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 10, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }, { validator: validatePass, trigger: 'blur' } ], checkPass: [{ validator: validatePass2, trigger: 'blur' }], cellphoneORmailbox: [{ required: true, message: '请输入手机号或邮箱', trigger: 'blur' }, { validator: this.validateContact, trigger: 'blur' } ], verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }] }, // 重置密码 resetDataPass: { cellphoneORmailbox: '', verifyCode: "", newPass: "", checkPass: "" }, } }, onLoad() { uni.getSystemInfo({ success: function(info) { // console.log('屏幕的宽度：' + info.windowWidth); // console.log('屏幕的高度：' + info.windowHeight); } }); }, mounted() { this.getElementWidth(); }, methods: { // 已有账号？返回登录 BacktoLogin() { uni.redirectTo({ url: '/pages/Login/Login' }) }, // 获取验证码 async verifyCodeClick() { console.log('获取验证码'); let Obj = { communicateParam: this.resetDataPass.cellphoneORmailbox, } await getverifyCode(Obj).then(res => { console.log(res, '验证码获取成功'); }) }, // 列表项跳转 listDataClick(item) { console.log(item); // 在当前页面设置全局变量 // uni.setStorageSync('globalData', { id: 123, name: 'example' }); if (item.id == 1) { uni.navigateTo({ url: '/pages/character/detail?id=' + item.id }) } else if (item.id == 2) { console.log(item.name); // uni.navigateTo({ // url:'/pages/character/detail?id='+item.id // }) } else if (item.id == 3) { uni.navigateTo({ url: '/pages/academicGenres/index?id=' + item.id }) } else if (item.id == 4) { uni.navigateTo({ url: '/pages/territory/territory?id=' + item.id }) } else if (item.id == 5) { uni.navigateTo({ url: '/pages/TcmSystem/TcmSystem?id=' + item.id }) } }, import { getRestPassword, getverifyCode } from "@/api/index.js"; import { encryptAES } from "@/utils/Crypto.js"; import { nextTick } from "vue"; import Footer1 from "@/components/footer/footer.vue"; import { Message } from "element-ui"; export default { components: { Footer1, }, data() { // 密码 var validatePass = (rule, value, callback) => { if (value === "") { callback(new Error("请输入密码")); } else { if (this.resetDataPass.checkPass !== "") { this.$nextTick(() => { this.$refs.formLogin.validateField("checkPass"); }); } callback(); } }; // 确认密码 var validatePass2 = (rule, value, callback) => { if (value === "") { callback(new Error("请再次输入密码")); } else if (value !== this.resetDataPass.newPass) { callback(new Error("两次输入密码不一致!")); } else { callback(); } }; return { //验证码倒计时 countdown: 0, // 用户注册 isRegister: false, // 用户登录 isLogin: true, // 修改密码 isAmendPass: false, // 重置密码 isResetPass: false, // 注册用户账号的校验 rules: { loginID: [ { required: true, message: "请输入登录账号", trigger: "blur", }, ], newPass: [ { required: true, message: "请输入密码", trigger: "blur", }, { min: 6, max: 10, message: "密码长度在 6 到 12 个字符", trigger: "blur", }, { validator: validatePass, trigger: "blur", }, ], checkPass: [ { validator: validatePass2, trigger: "blur", }, ], cellphoneORmailbox: [ { required: true, message: "请输入手机号", trigger: "blur", }, { validator: this.validateContact, trigger: "blur", }, ], verifyCode: [ { required: true, message: "请输入验证码", trigger: "blur", }, ], }, // 重置密码 resetDataPass: { cellphoneORmailbox: "", verifyCode: "", newPass: "", checkPass: "", }, }; }, onLoad() { uni.getSystemInfo({ success: function (info) { // console.log('屏幕的宽度：' + info.windowWidth); // console.log('屏幕的高度：' + info.windowHeight); }, }); }, mounted() { this.getElementWidth(); }, methods: { // 已有账号？返回登录 BacktoLogin() { uni.redirectTo({ url: "/pages/Login/Login", }); }, // 获取验证码 async verifyCodeClick() { if (!this.resetDataPass.cellphoneORmailbox) { this.$message({ message: "请输入手机！", type: "warning", }); // 手机号/或者邮箱 validateContact(rule, value, callback) { const regPhone = /^1[0-9]{10}$/; const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; console.log(value, regPhone.test(value), regEmail.test(value)); if (regPhone.test(value) || regEmail.test(value)) { callback(); // 校验通过 } else { callback(new Error('请输入正确的手机号或邮箱')); // 校验失败 } }, getElementWidth() { this.$nextTick(() => { var width = this.$refs.Rtop.$el.clientWidth; this.Rtop1 = width + 50; console.log('Element width:', width); }) }, // 忘记密码 Login2(formName) { let Obj = { "communicateParam": this.resetDataPass.cellphoneORmailbox, //手机或邮箱 "verifyCode": this.resetDataPass.verifyCode, //验证码 "newPassword": encryptAES(this.resetDataPass.newPass) //新密码 } console.log(Obj); this.$refs[formName].validate(async (valid) => { if (valid) { await getRestPassword(Obj).then(res => { console.log(res, '接口'); if (res.success) { console.log('忘记密码的接口拿到数据了'); uni.navigateTo({ url: '/pages/Login/Login' }) } else { Message.error(res.errorText || '') } }) // alert('submit!成功'); // uni.redirectTo({ // url: '/pages/Login/Login' // }) } else { console.log('error submit!!失败'); return false; } }); } } } return false; } if (this.countdown > 0) { return; } let Obj = { communicateParam: this.resetDataPass.cellphoneORmailbox, }; this.countdown = 60; const intervalId = setInterval(() => { if (this.countdown > 0) { this.countdown -= 1; } else { clearInterval(intervalId); } }, 1000); await getverifyCode(Obj).then((res) => { console.log(res, "验证码获取成功"); }); }, // 列表项跳转 listDataClick(item) { console.log(item); // 在当前页面设置全局变量 // uni.setStorageSync('globalData', { id: 123, name: 'example' }); if (item.id == 1) { uni.navigateTo({ url: "/pages/character/detail?id=" + item.id, }); } else if (item.id == 2) { console.log(item.name); // uni.navigateTo({ // url:'/pages/character/detail?id='+item.id // }) } else if (item.id == 3) { uni.navigateTo({ url: "/pages/academicGenres/index?id=" + item.id, }); } else if (item.id == 4) { uni.navigateTo({ url: "/pages/territory/territory?id=" + item.id, }); } else if (item.id == 5) { uni.navigateTo({ url: "/pages/TcmSystem/TcmSystem?id=" + item.id, }); } }, // 手机号/或者邮箱 validateContact(rule, value, callback) { const regPhone = /^1[0-9]{10}$/; const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; console.log(value, regPhone.test(value), regEmail.test(value)); if (regPhone.test(value) || regEmail.test(value)) { callback(); // 校验通过 } else { callback(new Error("请输入正确的手机号")); // 校验失败 } }, getElementWidth() { this.$nextTick(() => { var width = this.$refs.Rtop.$el.clientWidth; this.Rtop1 = width + 50; console.log("Element width:", width); }); }, // 忘记密码 Login2(formName) { let Obj = { communicateParam: this.resetDataPass.cellphoneORmailbox, //手机或邮箱 verifyCode: this.resetDataPass.verifyCode, //验证码 newPassword: encryptAES(this.resetDataPass.newPass), //新密码 }; console.log(Obj); this.$refs[formName].validate(async (valid) => { if (valid) { await getRestPassword(Obj).then((res) => { console.log(res, "接口"); if (res.success) { console.log("忘记密码的接口拿到数据了"); uni.navigateTo({ url: "/pages/Login/Login", }); } else { Message.error(res.errorText || ""); } }); // alert('submit!成功'); // uni.redirectTo({ // url: '/pages/Login/Login' // }) this.$message({ message: "密码重置成功", type: "success", }); } else { console.log("error submit!!失败"); return false; } }); }, }, }; </script> <style scoped> /* /* 在屏幕宽度超过 1440px 时的样式设置 */ /* @media screen and (min-width: 1441px) { /* @media screen and (min-width: 1441px) { ::v-deep .el-card { top: 60% !important; } @@ -303,400 +387,386 @@ } } */ @media screen and (min-width:2560px)and (max-width:3840px) { .LoginBg { margin: 0 !important; height: .3rem !important; } @media screen and (min-width: 2560px) and (max-width: 3840px) { .LoginBg { margin: 0 !important; height: 0.3rem !important; } ::v-deep .el-card { top: 90% !important; padding: 0 !important; } ::v-deep .el-card { top: 90% !important; padding: 0 !important; } ::v-deep .el-card__body { padding: .25rem .5rem !important; } ::v-deep .el-card__body { padding: 0.25rem 0.5rem !important; } ::v-deep .el-form { padding-left: .1rem !important; } ::v-deep .el-form { padding-left: 0.1rem !important; } ::v-deep .el-form-item__error { font-size: .13rem !important; } ::v-deep .el-form-item__error { font-size: 0.13rem !important; } ::v-deep .el-input__inner { height: .35rem !important; font-size: .14rem; } ::v-deep .el-input__inner { height: 0.35rem !important; font-size: 0.14rem; } ::v-deep .el-form-item__label { display: flex; align-items: center; justify-content: flex-end; margin-right: .2rem !important; width: .7rem; } ::v-deep .el-form-item__label { display: flex; align-items: center; justify-content: flex-end; margin-right: 0.2rem !important; width: 0.7rem; } .hua { height: 4rem !important; } .hua { height: 4rem !important; } .LoginTop { margin-bottom: .4rem !important; } .LoginTop { margin-bottom: 0.4rem !important; } .yzm { top: 15% !important; } .yzm { top: 15% !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .rrr { width: 2rem !important; } .rrr { width: 2rem !important; } .btn { margin-bottom: .1rem !important; } .btn { margin-bottom: 0.1rem !important; } .btn ::v-deep .el-button { margin-top: 0.2rem !important; font-size: 0.2rem !important; width: 100%; padding: 0.12rem !important; .btn ::v-deep .el-button { margin-top: 0.2rem !important; font-size: 0.2rem !important; width: 100%; padding: 0.12rem !important; span { font-weight: bold !important; } } span { font-weight: bold !important; } } .asdf { margin-bottom: .1rem !important; } .asdf { margin-bottom: 0.1rem !important; } .LoginBg { margin: 0 !important; height: .3rem !important; } .LoginBg { margin: 0 !important; height: 0.3rem !important; } ::v-deep .el-card { top: 80% !important; padding: 0 !important; } ::v-deep .el-card { top: 80% !important; padding: 0 !important; } ::v-deep .el-card__body { padding: .25rem .5rem !important; } ::v-deep .el-card__body { padding: 0.25rem 0.5rem !important; } ::v-deep .el-form { padding-left: .1rem !important; } ::v-deep .el-form { padding-left: 0.1rem !important; } ::v-deep .el-form-item__error { font-size: .13rem !important; } ::v-deep .el-form-item__error { font-size: 0.13rem !important; } ::v-deep .el-input__inner { height: .35rem !important; } ::v-deep .el-input__inner { height: 0.35rem !important; } .hua { height: 5rem !important; } .hua { height: 5rem !important; } .LoginTop { margin-bottom: .25rem !important; } .LoginTop { margin-bottom: 0.25rem !important; } .yzm { top: 15% !important; } .yzm { top: 15% !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .rrr { width: 2rem !important; height: 2.5rem !important; } .rrr { width: 2rem !important; height: 2.5rem !important; } .btn ::v-deep .el-button { margin-top: 0.2rem !important; /* font-size: 0.2rem !important; .btn ::v-deep .el-button { margin-top: 0.2rem !important; /* font-size: 0.2rem !important; width: 100%; padding: 0.12rem !important; */ } } .asdf { margin-bottom: .1rem !important; } .asdf { margin-bottom: 0.1rem !important; } } } @media screen and (min-width: 1920px) and (max-width: 2560px) { .LoginBg { margin: 0 !important; height: 0.3rem !important; } @media screen and (min-width: 1920px) and (max-width:2560px) { .LoginBg { margin: 0 !important; height: .3rem !important; } ::v-deep .el-card { top: 80% !important; padding: 0 !important; } ::v-deep .el-card { top: 80% !important; padding: 0 !important; } ::v-deep .el-card__body { padding: 0.25rem 0.5rem !important; } ::v-deep .el-card__body { padding: .25rem .5rem !important; } ::v-deep .el-form { padding-left: 0.1rem !important; } ::v-deep .el-form { padding-left: .1rem !important; } ::v-deep .el-form-item__error { font-size: 0.13rem !important; } ::v-deep .el-form-item__error { font-size: .13rem !important; } ::v-deep .el-input__inner { height: 0.35rem !important; } ::v-deep .el-input__inner { height: .35rem !important; } .hua { height: 5rem !important; } .hua { height: 5rem !important; } .LoginTop { margin-bottom: 0.25rem !important; } .LoginTop { margin-bottom: .25rem !important; } .yzm { top: 15% !important; } .yzm { top: 15% !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .fff { width: 2.4rem !important; height: 4rem !important; } .rrr { width: 2rem !important; height: 2.5rem !important; } .rrr { width: 2rem !important; height: 2.5rem !important; } .btn ::v-deep .el-button { margin-top: 0.2rem !important; /* font-size: 0.2rem !important; .btn ::v-deep .el-button { margin-top: 0.2rem !important; /* font-size: 0.2rem !important; width: 100%; padding: 0.12rem !important; */ } } .asdf { margin-bottom: .1rem !important; } } .asdf { margin-bottom: 0.1rem !important; } } .LoginBg { width: 1.2rem; height: .37rem; background: url(@/static/image/重置密码.png) no-repeat 0 0; background-size: 100% 100%; .LoginBg { width: 1.2rem; height: 0.37rem; background: url(@/static/image/重置密码.png) no-repeat 0 0; background-size: 100% 100%; } } ::v-deep .el-card { border-radius: 0; width: 5.42rem; /* height: 5.65rem; */ position: absolute; top: 80%; } ::v-deep .el-card__body { padding: 0.26rem 0.58rem; } ::v-deep .el-card { border-radius: 0; width: 5.42rem; /* height: 5.65rem; */ position: absolute; top: 80%; } .btn >>> .el-form-item__content { margin-left: 0 !important; } ::v-deep .el-card__body { padding: .26rem .58rem; } ::v-deep .el-form-item__content { margin-left: 0 !important; flex: 1; } .btn>>>.el-form-item__content { margin-left: 0 !important; ::v-deep .el-input__inner { border: none; border-bottom: 1px solid #2d476a; border-radius: 0; padding: 0; height: 0.4rem; line-height: 0.4rem; } } ::v-deep .el-form-item__error { /* display: none; */ } ::v-deep .el-form-item__content { margin-left: 0 !important; flex: 1; } ::v-deep .input.invalid:focus { border-color: #2d476a !important; } ::v-deep .el-input__inner { border: none; border-bottom: 1px solid #2d476a; border-radius: 0; padding: 0; height: .4rem; line-height: .4rem; } ::v-deep .el-input__inner:invalid { border-color: #2d476a !important; } ::v-deep .el-form-item__error { /* display: none; */ } ::v-deep .el-form-item__label { min-width: 0.6rem; padding: 0; color: #244a7b; font-size: 0.14rem; font-weight: 500; margin-right: 0.29rem; } ::v-deep .input.invalid:focus { border-color: #2d476a !important; } ::v-deep .el-form-item { margin-bottom: 0.22rem; display: flex; } ::v-deep .el-input__inner:invalid { border-color: #2d476a !important; } .ss1 { background-repeat: no-repeat; background-size: 100% 100%; width: 40rpx; height: 40rpx; background-size: 100% 100%; } .s1 { background-image: url(@/static/image/search.png); } ::v-deep .el-form-item__label { min-width: .6rem; padding: 0; color: #244A7B; font-size: .14rem; font-weight: 500; margin-right: .29rem; } .s2 { background-image: url(@/static/image/question.png); } ::v-deep .el-form-item { margin-bottom: .22rem; display: flex; } .s3 { background-image: url(@/static/image/question.png); } .ss1 { background-repeat: no-repeat; background-size: 100% 100%; width: 40rpx; height: 40rpx; background-size: 100% 100%; } .container { background: url(@/static/image/bg1.png); width: 100vw; height: 100vh; .s1 { background-image: url(@/static/image/search.png); color: #fff; } .repository { width: 100% !important; /* margin-top: 19px; */ /* height: 68%; */ display: flex; flex-direction: column; justify-content: space-around; align-items: center; .s2 { background-image: url(@/static/image/question.png); } .Ttop { margin-top: 0.38rem; margin-bottom: 1.22rem; } .s3 { background-image: url(@/static/image/question.png); } .r-top { font-size: 40rpx !important; margin: 10rpx 0; } } } .container { background: url(@/static/image/bg1.png); width: 100vw; height: 100vh; .login { width: 0.52rem; height: 0.52rem; display: inline-block; vertical-align: middle; margin-right: 0.19rem; background: url(@/static/image/logo.png) no-repeat 0 0; background-size: 100% 100%; } color: #fff; .rrr { position: absolute; right: 0.53rem; bottom: 0.36rem; width: 2.5rem; height: 3.07rem; opacity: 1; background: url(@/static/image/bg4.png); background-size: 100% 100%; } .repository { width: 100% !important; /* margin-top: 19px; */ /* height: 68%; */ display: flex; flex-direction: column; justify-content: space-around; align-items: center; .hua { width: 13.81rem; height: 5.965rem; position: absolute; background: url(@/static/image/bg3.png) no-repeat 0 0; background-size: 100% 100%; } .Ttop { margin-top: .38rem; margin-bottom: 1.22rem; } /* 底部人物背景图 */ .fff { background: url(@/static/image/bg2.png) no-repeat 0 0; background-size: 100% 100%; width: 2.74rem; height: 4.52rem; position: fixed; bottom: 0; z-index: 9999999999999; left: 0; } .r-top { font-size: 40rpx !important; margin: 10rpx 0; } } ::v-deep .uni-easyinput__content { border-radius: 30rpx !important; /* height: 52rpx; */ } } .secretary { width: 1300rpx !important; height: 50rpx; /* height: 80%; */ /* flex-wrap: wrap; */ padding: 0 20px; text-align: center; .login { width: .52rem; height: .52rem; display: inline-block; vertical-align: middle; margin-right: .19rem; background: url(@/static/image/logo.png) no-repeat 0 0; background-size: 100% 100%; } li { background-color: #fff; color: black; height: 600rpx; display: flex; justify-content: space-between; flex-direction: column; align-items: center; border: 1rpx solid #fff; padding: 50rpx 65rpx; /* padding: 58rpx 128rpx 88rpx; */ text-align: center; background: #ebf4ff; } } .rrr { position: absolute; right: .53rem; bottom: .36rem; width: 2.5rem; height: 3.07rem; opacity: 1; background: url(@/static/image/bg4.png); background-size: 100% 100%; } .hua { width: 13.81rem; height: 5.965rem; position: absolute; background: url(@/static/image/bg3.png) no-repeat 0 0; background-size: 100% 100%; } /* 底部人物背景图 */ .fff { background: url(@/static/image/bg2.png) no-repeat 0 0; background-size: 100% 100%; width: 2.74rem; height: 4.52rem; position: fixed; bottom: 0; z-index: 9999999999999; left: 0; } ::v-deep .uni-easyinput__content { border-radius: 30rpx !important; /* height: 52rpx; */ } .secretary { width: 1300rpx !important; height: 50rpx; /* height: 80%; */ /* flex-wrap: wrap; */ padding: 0 20px; text-align: center; li { background-color: #fff; color: black; height: 600rpx; display: flex; justify-content: space-between; flex-direction: column; align-items: center; border: 1rpx solid #fff; padding: 50rpx 65rpx; /* padding: 58rpx 128rpx 88rpx; */ text-align: center; background: #EBF4FF; } } .Bbottom { display: flex; justify-content: center; } </style> .Bbottom { display: flex; justify-content: center; } </style> src/pages/inherit/index.vue
@@ -110,10 +110,13 @@ onLoad(options) { this.idIndex = options.id; console.log("optionsoptionsoptions", options.id); getDynasty() }, mounted() { this.getStatistics(); this.getData(); this.getDynasty() }, methods: { getStatistics() { @@ -179,14 +182,14 @@ let option = { title: { text: [""] text: [""], }, backgroundColor: { type: "image", image: "/static/image/WMBg.png", repeat: "repeat-x", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat' size: "100% 100%", // 背景图片的尺寸，可以是百分比或者像素 position: "center center" // 背景图片的位置，可以是 top, bottom, middle 或者百分比 position: "center center", // 背景图片的位置，可以是 top, bottom, middle 或者百分比 }, tooltip: {}, animationDurationUpdate: 1500, @@ -201,7 +204,7 @@ label: { show: true, color: "black", // 设置节点文字颜色为黑色 fontSize: FontSize // 设置文字大小 fontSize: FontSize, // 设置文字大小 }, edgeSymbol: ["circle", "arrow"], edgeSymbolSize: [4, 10], @@ -216,7 +219,7 @@ // params.data 是边的数据对象，你可以在这里定义关系名 // 例如，你可以根据 source 和 target 的名称来定义关系名 return params.data.relationName; // 如果定义了 relationName 则显示它，否则显示“父子” } }, }, //各个节点 data: this.nodeData, @@ -224,17 +227,17 @@ color: "#000000", opacity: 0.9, width: 2, curveness: 0 curveness: 0, }, force: { // initLayout: 'circular', // gravity: 0 friction: 0.1, repulsion: 500, edgeLength: 6 } } ] edgeLength: 6, }, }, ], }; //进行渲染 myChart.setOption(option); src/pages/knowledgeBase/knowledgeBase.vue
@@ -1,1056 +1,1226 @@ <template> <view> <!-- 顶部 --> <headNav idIndex="0" text="中国医学人物知识库" /> <!-- 搜索 --> <view class="flex flex-center Search"> <!-- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> --> <advancedSearch @onSearch="onSearch" placehold="输入姓名/别名/时期/传主职业搜索" :isAvancedTrue="false" /> <view class="advancedSea" @click="isAvancedClick" style="color:#244A7B ;cursor: pointer;">高级搜索 ﹀</view> </view> <!-- 热门搜索 --> <view class="flex flex-center hotSearch" style="font-size: 20rpx;margin: 10rpx 0;"> 热门搜索： <ul class="flex" style="margin-right: 10rpx;"> <!-- <li v-for="item in hot" :key="item.id" @tap="HotClick(item.id)" style="margin: 0 10rpx;" :style="{color:item.bgColor==true?'#5879a4':'#000'}"> {{item.name}} </li>--> <li v-for="item in hot" @click="hotSearchClick(item)" :key="item.id" class="cursor" style="color: #5879a4;"> {{item.name}} </li> </ul> </view> <!-- 高级搜索 --> <view class="advancedSeaTrue" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: .18rem;"> <view style="background-color: #fff;padding: 20rpx;" class="advancedSeaTrue1"> <h3>高级搜索</h3> <MyForm @submit="onSubmit" :from="from" /> </view> </view> <uni-row class="demo-uni-row zhushuju flex flex-items-start" style="padding: 0 230rpx; "> <!-- 左侧 --> <view class="fbox2" style="width: 2.6rem;"> <!-- 职业 --> <view class="demo-uni-col zhiye dark box boox" style="width: 2.6rem; margin-bottom: 40rpx;background-color: #fff; border: 2rpx solid #e0e0e0;min-height: 2rem;"> <h3>{{profession.title}}</h3> <ul style="margin-top: 10rpx;" :class="{ 'a': activeBox === 'a'?'a':'' }"> <!-- background-color: #d6e3f4;border-radius: 60rpx; --> <li class="flex" :style="{'background':profession.index === item.tagId ? '#d6e3f4' :'','borderRadius': profession.index === item.tagId ? '60rpx' :'',display:index+1>professionIndex?'none':'flex'}" v-for="(item,index) in profession.list" :key="index" style="padding:0 20rpx;line-height: .3rem;height: .3rem;" @click="handInstitCLick(item,'a')"> <view class="">{{item.tagName}}</view> <view class="">{{item.count}}</view> </li> </ul> <view v-if="profession.list.length-1 >3" class="flex flex-center "> <view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('a','职业')"> {{ activeBox !== 'a' ? '更多 ﹀' : '收起 ︿' }} </view> </view> </view> <!-- 时期 --> <view class="demo-uni-col dark box boox zhongjianleft" style="background-color: #fff;border: 2rpx solid #e0e0e0;" :style="{'marginBottom': isAdvancedSearch ===true ? '0': '40rpx'}"> <h3>{{dynasty.title}}</h3> <ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }"> <!-- background-color: #d6e3f4;border-radius: 60rpx; --> <li class="flex" :style="{'background':dynasty.index === item.dynastyId ? '#d6e3f4' :'','borderRadius': dynasty.index === item.dynastyId ? '60rpx' :'',display:index+1>dynastyIndex?'none':'flex'}" v-for="(item,index) in dynasty.list" :key="index" style="padding:0 20rpx;" @click="handInstitCLick(item,'b')"> <view class="">{{item.dynastyName}}</view> <view class="">{{item.count}}</view> </li> </ul> <view v-if="dynasty.list.length-1 >3" class="flex flex-center "> <view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('b','时期')"> {{ activeBox !== 'b' ? '更多 ﹀' : '收起 ︿' }} </view> </view> </view> <!-- 来源 --> <view v-if="!isAdvancedSearch" class="demo-uni-col dark box boox" style="height: 250rpx;background-color: #fff;border: 2rpx solid #e0e0e0;"> <h3>{{source.title}}</h3> <ul class="laiyuan" style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }"> <!-- background-color: #d6e3f4;border-radius: 60rpx; --> <li class="flex liClick" v-for="(item,index) in source.list" :key="index" style="padding:0 20rpx;color: #244A7B;" @click="handInstitCLick(item,'c')"> <view class="">{{ index+1 + '. ' +item.source}}</view> </li> </ul> <!-- <view class="flex flex-center"> <view> <!-- 顶部 --> <headNav idIndex="0" text="中国医学人物知识库" /> <!-- 搜索 --> <view class="flex flex-center Search"> <!-- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> --> <advancedSearch @onSearch="onSearch" placehold="输入姓名/别名/时期/传主职业搜索" :isAvancedTrue="false" :keyword="keywords" /> <view class="advancedSea" @click="isAvancedClick" style="color: #244a7b; cursor: pointer" >高级搜索 ﹀</view > </view> <!-- 热门搜索 --> <view class="flex flex-center hotSearch" style="font-size: 20rpx; margin: 10rpx 0" > 热门搜索： <ul class="flex" style="margin-right: 10rpx"> <li v-for="item in hot" @click="hotSearchClick(item)" :key="item.id" class="cursor" style="color: #5879a4" > {{ item.name }} </li> </ul> </view> <!-- 高级搜索 --> <view class="advancedSeaTrue" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: 0.18rem" > <view style="background-color: #fff; padding: 20rpx" class="advancedSeaTrue1" > <h3>高级搜索</h3> <MyForm @submit="onSubmit" :from="from" /> </view> </view> <uni-row class="demo-uni-row zhushuju flex flex-items-start" style="padding: 0 230rpx" > <!-- 左侧 --> <view class="fbox2" style="width: 2.6rem"> <!-- 职业 --> <view class="demo-uni-col zhiye dark box boox" style=" width: 2.6rem; margin-bottom: 40rpx; background-color: #fff; border: 2rpx solid #e0e0e0; min-height: 2rem; " > <h3>{{ profession.title }}</h3> <ul style="margin-top: 10rpx" :class="{ a: activeBox === 'a' ? 'a' : '' }" > <li class="flex" :style="{ background: profession.index === item.tagId ? '#d6e3f4' : '', borderRadius: profession.index === item.tagId ? '60rpx' : '', display: index + 1 > professionIndex ? 'none' : 'flex', }" v-for="(item, index) in profession.list" :key="index" style="padding: 0 20rpx; line-height: 0.3rem; height: 0.3rem" @click="handInstitCLick(item, 'a')" > <view class="">{{ item.tagName }}</view> <view class="">{{ item.count }}</view> </li> </ul> <view v-if="profession.list.length - 1 > 3" class="flex flex-center"> <view class="toggleButton" style="color: #c1d3ea" @click="shrinkClick('a', '职业')" > {{ activeBox !== "a" ? "更多 ﹀" : "收起 ︿" }} </view> </view> </view> <!-- 时期 --> <view class="demo-uni-col dark box boox zhongjianleft" style="background-color: #fff; border: 2rpx solid #e0e0e0" :style="{ marginBottom: isAdvancedSearch === true ? '0' : '40rpx' }" > <h3>{{ dynasty.title }}</h3> <ul style="margin-top: 10rpx" :class="{ b: activeBox === 'b' ? 'b' : '' }" > <!-- background-color: #d6e3f4;border-radius: 60rpx; --> <li class="flex" :style="{ background: dynasty.index === item.dynastyId ? '#d6e3f4' : '', borderRadius: dynasty.index === item.dynastyId ? '60rpx' : '', display: index + 1 > dynastyIndex ? 'none' : 'flex', }" v-for="(item, index) in dynasty.list" :key="index" style="padding: 0 20rpx" @click="handInstitCLick(item, 'b')" > <view class="">{{ item.dynastyName }}</view> <view class="">{{ item.count }}</view> </li> </ul> <view v-if="dynasty.list.length - 1 > 3" class="flex flex-center"> <view class="toggleButton" style="color: #c1d3ea" @click="shrinkClick('b', '时期')" > {{ activeBox !== "b" ? "更多 ﹀" : "收起 ︿" }} </view> </view> </view> <!-- 来源 --> <view v-if="!isAdvancedSearch" class="demo-uni-col dark box boox" style=" /* height: 250rpx; */ background-color: #fff; border: 2rpx solid #e0e0e0; " > <h3>{{ source.title }}</h3> <ul class="laiyuan" style="margin-top: 10rpx" :class="{ b: activeBox === 'b' ? 'b' : '' }" > <!-- background-color: #d6e3f4;border-radius: 60rpx; --> <li class="flex liClick" v-for="(item, index) in source.list" :key="index" style="padding: 0 20rpx; color: #244a7b" @click="handInstitCLick(item, 'c')" > <view class="">{{ index + 1 + ". " + item.source }}</view> </li> </ul> <!-- <view class="flex flex-center"> <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')"> {{ activeBox !== 'b' ? '更多 ﹀' : '收起 ︿' }} </view> </view> --> </view> </view> <!-- 右侧 --> <view class="rightList demo-uni-col light fbox3 relative flex flex-column flex-grow: 1;" style="width: 100%; margin-left: .2rem; background-color: #fff;border: 1px solid #C1D3EA;padding: 10rpx 20rpx;"> <view class="flex lightTop" style="width: 100%; margin:.1rem 0"> <view class="" style="color: #2C2C2C;">共1374条</view> <el-button size="small" @click="exportClick">下载</el-button> </view> <el-table :data="tableData" class="lightBo" style="width: 100%"> <el-table-column prop="id" label="序号" width="110"></el-table-column> <el-table-column prop="personName" label="姓名"></el-table-column> <el-table-column prop="personAlias" label="别名"></el-table-column> <el-table-column prop="gender" label="性别" width="70"></el-table-column> <el-table-column prop="period" label="时期"></el-table-column> <el-table-column prop="birthYear" label="生年" width="130"></el-table-column> <el-table-column prop="deathYear" label="卒年" width="130"></el-table-column> <el-table-column prop="nativePlace" label="籍贯"></el-table-column> <el-table-column prop="socialDistinction" label="社会身份"></el-table-column> <el-table-column prop="official" label="官职"></el-table-column> </el-table> <!-- 分页 --> <el-row class="fenye" style="position: absolute;bottom: .1rem;"> <el-pagination class="paging flex" :current-page="CurrentPage" :total="total" :page-size="pageSize" @current-change="CurrentChange" @prev-click="PrevClick" @next-click="NextClick" prev-text="上一页" next-text="下一页" background layout="prev, pager, next"> </el-pagination> </el-row> </view> </uni-row> <div class="abox"></div> <Footer1 /> </view> </view> </view> <!-- 右侧 --> <view class="rightList demo-uni-col light fbox3 relative flex flex-column flex-grow: 1;" style=" width: 100%; margin-left: 0.2rem; background-color: #fff; border: 1px solid #c1d3ea; padding: 10rpx 20rpx; " > <view class="flex lightTop" style="width: 100%; margin: 0.1rem 0"> <view class="" style="color: #2c2c2c">共{{ total }}条</view> <el-button size="small" @click="exportClick">下载</el-button> </view> <el-table :data="tableData" class="lightBo" style="width: 100%"> <el-table-column prop="id" label="序号" width="110"></el-table-column> <el-table-column prop="personName" label="姓名"></el-table-column> <el-table-column prop="personAlias" label="别名"></el-table-column> <el-table-column prop="gender" label="性别" width="70" ></el-table-column> <el-table-column prop="period" label="时期"></el-table-column> <el-table-column prop="birthYear" label="生年" width="130" ></el-table-column> <el-table-column prop="deathYear" label="卒年" width="130" ></el-table-column> <el-table-column prop="nativePlace" label="籍贯"></el-table-column> <el-table-column prop="socialDistinction" label="社会身份" ></el-table-column> <el-table-column prop="official" label="官职"></el-table-column> </el-table> <!-- 分页 --> <el-row class="fenye" style="position: absolute; bottom: 0.1rem"> <el-pagination class="paging flex" :current-page="CurrentPage" :total="total" :page-size="pageSize" @current-change="CurrentChange" @prev-click="PrevClick" @next-click="NextClick" prev-text="上一页" next-text="下一页" background layout="prev, pager, next" > </el-pagination> </el-row> </view> </uni-row> <div class="abox"></div> <Footer1 /> </view> </template> <script> import Footer1 from '@/components/footer/footer' import MyForm from '@/components/form/form.vue' // 下载需要导入的依赖 import ExportJsonExcel from "js-export-excel"; import { getPDataStatistics, getPDownload, getPList, getHotSearch } from '@/api/index.js' export default { components: { Footer1, MyForm }, data() { return { // 高级搜索显示 isAdvancedSearch: false, // 高级搜索 from: { from: [{ type: 'input', label: '姓名', name: 'name', value: '' }, { type: 'input', label: '别名', name: 'alias', value: '' }, { type: 'input', label: '籍贯', name: 'nativePlace', value: '' }, { type: 'select', label: '职业', value: '', name: 'tagId', options: [{ label: '医家', value: '1' }, { label: '世家', value: '2' } ] }, { type: 'input', label: '职官', name: 'official', value: '' }, { type: 'select', label: '性别', value: '', name: 'genderType', options: [{ label: '未指明', value: 'UNKNOWN' }, { label: '男', value: 'MALE' }, { label: '女', value: 'WOMAN' } ] }, { type: 'input', label: '时期', name: 'dynasty', value: '' }, { type: 'input', label: '机构', name: 'institution', value: '' } ] }, import Footer1 from "@/components/footer/footer"; import MyForm from "@/components/form/form.vue"; // 下载需要导入的依赖 import ExportJsonExcel from "js-export-excel"; import { getPDataStatistics, getPDownload, getPList, getHotSearch, getPersonList, } from "@/api/index.js"; export default { components: { Footer1, MyForm, }, data() { return { // 高级搜索显示 isAdvancedSearch: false, // 高级搜索 from: { from: [ { type: "input", label: "姓名", name: "name", value: "", }, { type: "input", label: "别名", name: "alias", value: "", }, { type: "input", label: "籍贯", name: "nativePlace", value: "", }, { type: "select", label: "职业", value: "", name: "tagId", options: [ { label: "医家", value: "1", }, { label: "世家", value: "2", }, ], }, { type: "input", label: "职官", name: "official", value: "", }, { type: "select", label: "性别", value: "", name: "genderType", options: [ { label: "未指明", value: "UNKNOWN", }, { label: "男", value: "MALE", }, { label: "女", value: "WOMAN", }, ], }, { type: "input", label: "时期", name: "dynasty", value: "", }, { type: "input", label: "机构", name: "institution", value: "", }, ], }, // 热门搜索 hot: [], // 职业 profession: { title: '职业', index: 0, id: 0, list: [] }, // 现在多少条职业数据 professionIndex: 4, // 展开和收缩的按钮需要 activeBox: null, // 时期 dynasty: { title: '时期', id: 0, index: 0, list: [] }, // 现在多少条时期数据 dynastyIndex: 4, // 来源 source: { title: '来源', index: 0, id: 0, list: [] }, // 表格的数组 tableData: [], // 分页的总数 total: 100, // 当前页 CurrentPage: 1, // 一页显示多少条数据 pageSize: 6, dataTable: [], option: {} } }, onLoad(options) { this.onSearch({text:options.name}) }, mounted() { // 修改两次的高度保持一致 var box1Height = document.querySelector('.fbox2').offsetHeight; document.querySelector('.fbox3').style.height = box1Height + (box1Height / 18) + 'px'; console.log(box1Height, 'box1Height'); this.getStatistics() // 默认先调用搜索一次 this.onSearch('') }, methods: { // ExportJsonExcel实例 Ture() { // 创建ExportJsonExcel实例对象 let toExcel = new ExportJsonExcel(this.option); // 调用保存方法 toExcel.saveExcel(); }, // 下载按钮 exportClick() { const dataList = this.tableData; let dataTable = []; // dataTable代表excel文件中的数据内容 if (dataList) { for (let i in dataList) { let obj = { 序号: dataList[i].id, 姓名: dataList[i].personName, 别名: dataList[i].personAlias, 性别: dataList[i].gender, 时期: dataList[i].period, 生年: dataList[i].birthYear, 卒年: dataList[i].deathYear, 籍贯: dataList[i].nativePlace, 社会身份: dataList[i].socialDistinction, 官职: dataList[i].official, }; // 热门搜索 hot: [], // 职业 profession: { title: "职业", index: 0, id: 0, list: [], }, // 现在多少条职业数据 professionIndex: 4, // 展开和收缩的按钮需要 activeBox: null, // 时期 dynasty: { title: "时期", id: "", index: "", list: [], }, // 现在多少条时期数据 dynastyIndex: 4, // 来源 source: { title: "来源", index: 0, id: 0, list: [], }, // 表格的数组 tableData: [], // 分页的总数 total: 100, // 当前页 CurrentPage: 1, // 一页显示多少条数据 pageSize: 10, dataTable: [], option: {}, keywords: "", }; }, onLoad(options) { this.onSearch({ text: options.name }); this.keywords = options.name; }, mounted() { // 修改两次的高度保持一致 var box1Height = document.querySelector(".fbox2").offsetHeight; document.querySelector(".fbox3").style.height = box1Height + box1Height / 18 + "px"; console.log(box1Height, "box1Height"); this.getStatistics(); // 默认先调用搜索一次 this.onSearch(""); }, methods: { // ExportJsonExcel实例 Ture() { // 创建ExportJsonExcel实例对象 let toExcel = new ExportJsonExcel(this.option); // 调用保存方法 toExcel.saveExcel(); }, // 下载按钮 async exportClick() { const dataList = this.tableData; let Obj = { keywords: "", //搜索框检索 name: "", //姓名 alias: "", //别名 nativePlace: "", //机关 tagId: null, //职业id official: null, //职官 genderType: null, //性别 dynasty: null, //朝代id dynastyId: null, //朝代id institution: null, //机构 bookId: null, //来源id page: 1, pageSize: 9999, }; // // 搜索 await getPersonList(Obj).then((res) => { console.log(res); // if (res.success) { // console.log(res, "搜索接口"); // this.tableData = res.list; // // 总数量 // this.total = res.npage.totalCount; // } }); let dataTable = []; // dataTable代表excel文件中的数据内容 if (dataList) { for (let i in dataList) { let obj = { 序号: dataList[i].id, 姓名: dataList[i].personName, 别名: dataList[i].personAlias, 性别: dataList[i].gender, 时期: dataList[i].period, 生年: dataList[i].birthYear, 卒年: dataList[i].deathYear, 籍贯: dataList[i].nativePlace, 社会身份: dataList[i].socialDistinction, 官职: dataList[i].official, }; dataTable.push(obj); // 设置excel每列获取的数据源 } } this.option.fileName = "中医医学人物知识库"; //excel文件名 //excel文件数据 this.option.datas = [{ // excel文件的数据源 sheetData: dataTable, // excel文件sheet的表名 sheetName: "sheet", // excel文件表头名 sheetHeader: ["序号", "姓名", "别名", "性别", "别名", "时期", "生年", "卒年", "籍贯", "社会身份", "官职"], // excel文件列名 sheetFilter: ["序号", "姓名", "别名", "性别", "别名", "时期", "生年", "卒年", "籍贯", "社会身份", "官职"], // columnWidths: ['10', '10', '20'] //excel列宽度设置 }, ]; this.Ture(); }, // 接口 async getStatistics() { // 热门搜索 await getHotSearch().then(res => { console.log(res, '热门搜索'); this.hot = Object.keys(res.object).map(key => { return { id: parseInt(key), name: res.object[key] }; }) }) // 右侧职业、时期、来源的数据 await getPDataStatistics().then(res => { console.log(res, '接口成功sdsdfsdsfs'); let totalCount1 = res.object.occupationStatistic.details.reduce((total, item) => total + item.count, 0); let totalCount2 = res.object.dynastyStatistic.details.reduce((total, item) => total + item .count, 0); // 职业 this.profession.list = [ ...res.object.occupationStatistic.details, ] // 高级搜索里面的职业-------------------------------------------------- // 找到职业字段在 from 对象中的索引 const professionIndex = this.from.from.findIndex(field => field.label === '职业'); // 如果找到了职业字段 if (professionIndex !== -1) { // 将 profession.list 转换为 options 格式 const options = this.profession.list.map(item => ({ label: item.tagName, value: item.tagId.toString() // 将 id 转换为字符串，确保与 value 类型一致 })); dataTable.push(obj); // 设置excel每列获取的数据源 } } this.option.fileName = "中医医学人物知识库"; //excel文件名 //excel文件数据 this.option.datas = [ { // excel文件的数据源 sheetData: dataTable, // excel文件sheet的表名 sheetName: "sheet", // excel文件表头名 sheetHeader: [ "序号", "姓名", "别名", "性别", "别名", "时期", "生年", "卒年", "籍贯", "社会身份", "官职", ], // excel文件列名 sheetFilter: [ "序号", "姓名", "别名", "性别", "别名", "时期", "生年", "卒年", "籍贯", "社会身份", "官职", ], // columnWidths: ['10', '10', '20'] //excel列宽度设置 }, ]; this.Ture(); }, // 接口 async getStatistics() { // 热门搜索 await getHotSearch().then((res) => { console.log(res, "热门搜索"); this.hot = Object.keys(res.object).map((key) => { return { id: parseInt(key), name: res.object[key], }; }); }); // 右侧职业、时期、来源的数据 await getPDataStatistics().then((res) => { console.log(res, "接口成功sdsdfsdsfs"); let totalCount1 = res.object.occupationStatistic.details.reduce( (total, item) => total + item.count, 0 ); let totalCount2 = res.object.dynastyStatistic.details.reduce( (total, item) => total + item.count, 0 ); // 职业 this.profession.list = [ { count: totalCount1, tagName: "全部", tagId: 0 }, ...res.object.occupationStatistic.details, ]; // 高级搜索里面的职业-------------------------------------------------- // 找到职业字段在 from 对象中的索引 const professionIndex = this.from.from.findIndex( (field) => field.label === "职业" ); // 如果找到了职业字段 if (professionIndex !== -1) { // 将 profession.list 转换为 options 格式 const options = this.profession.list.map((item) => ({ label: item.tagName, value: item.tagId.toString(), // 将 id 转换为字符串，确保与 value 类型一致 })); // 更新职业字段的 options 属性 this.$set(this.from.from[professionIndex], 'options', options); } // -------------------------------------------------- this.profession.index = this.profession.list[0].tagId // 时期 this.dynasty.list = [ ...res.object.dynastyStatistic.details ] // 来源 this.source.list = res.object.sourceStatistic.details this.source.index = this.source.list[0].bookId }) }, // 热门搜索 hotSearchClick(item) { this.onSearch({text:item.name}) console.log(item, '热门搜索'); }, // 左侧的机构统计等等按钮 handInstitCLick(item, name) { this.dynasty.id = 0 this.source.id = 0 this.profession.id = 0 this.CurrentPage = 1 if (name == 'a') { this.profession.index = item.tagId this.profession.id = item.tagId this.CurrentPage = 1 // 更新职业字段的 options 属性 this.$set(this.from.from[professionIndex], "options", options); } // -------------------------------------------------- this.profession.index = this.profession.list[0].tagId; // 时期 this.dynasty.list = [ { count: totalCount2, dynastyName: "全部", dynastyId: "" }, ...res.object.dynastyStatistic.details, ]; // 来源 this.source.list = res.object.sourceStatistic.details; this.source.index = this.source.list[0].bookId; }); }, // 热门搜索 hotSearchClick(item) { this.onSearch({ text: item.name }); console.log(item, "热门搜索"); }, // 左侧的机构统计等等按钮 handInstitCLick(item, name) { // this.dynasty.id = 0; // this.source.id = 0; // this.profession.id = 0; // this.CurrentPage = 1; if (name == "a") { this.profession.index = item.tagId; this.profession.id = item.tagId; this.CurrentPage = 1; } else if (name == "b") { this.dynasty.index = item.dynastyId; this.dynasty.id = item.dynastyId; this.CurrentPage = 1; console.log(item); } else if (name == "c") { this.source.index = item.bookId; this.source.id = item.bookId; this.CurrentPage = 1; console.log("来源"); } this.onSearch(""); } else if (name == 'b') { this.dynasty.index = item.dynastyId this.dynasty.id = item.dynastyId this.CurrentPage = 1 console.log(item); console.log(item, name); }, isAvancedClick() { this.isAdvancedSearch = !this.isAdvancedSearch; this.$nextTick(() => { var box1Height = document.querySelector(".fbox").offsetHeight; // let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px'; let box2Height = document.querySelector(".fbox1").offsetHeight; console.log(box1Height, box2Height); if (box1Height <= box2Height) { document.querySelector(".fbox1").style.height = box1Height + "px"; } }); }, // 高级搜索 async onSubmit(val) { console.log(val); this.profession.index = Number(val.tagId); this.profession.id = Number(val.tagId); const currentDynasty = this.dynasty.list.find( (f) => f.dynastyName == val.dynasty ); if (currentDynasty) { this.dynasty.index = currentDynasty.dynastyId; this.dynasty.id = currentDynasty.dynastyId; } } else if (name == 'c') { this.source.index = item.bookId this.source.id = item.bookId this.CurrentPage = 1 console.log('来源'); this.CurrentPage = 1; let Obj = { keywords: "", //搜索框检索 name: val.name, //姓名 alias: val.alias, //别名 nativePlace: val.nativePlace, //机关 tagId: val.tagId !== "" ? Number(val.tagId) : null, //职业id official: val.official, //职官 genderType: val.genderType !== "" ? val.genderType : null, //性别 dynasty: val.dynasty, //朝代id dynastyId: this.dynasty.id, //朝代id institution: val.institution, //机构 bookId: null, //来源id page: this.CurrentPage, pageSize: this.pageSize, }; // // 搜索 await getPersonList(Obj).then((res) => { console.log(res); if (res.success) { console.log(res, "搜索接口"); this.tableData = res.list; // 总数量 this.total = res.npage.totalCount; } }); console.log(val); }, // 基础搜索 async onSearch(val) { let Obj = { keywords: val.text, //搜索框检索 name: "", //姓名 alias: "", //别名 nativePlace: "", //机关 tagId: this.profession.id, //职业id official: "", //职官 genderType: null, //性别 dynasty: null, //朝代id dynastyId: this.dynasty.id, //朝代id institution: "", //机构 bookId: this.source.id, //来源id page: this.CurrentPage, pageSize: this.pageSize, }; // // 搜索 await getPersonList(Obj).then((res) => { if (res.success) { console.log(res, "搜索接口"); this.tableData = res.list; // 总数量 this.total = res.npage.totalCount; } }); // console.log(val, '士大夫但是'); }, // 热门搜索 HotClick(id) { this.hot.forEach((item) => { if (item.id === id) { console.log(item.id === id); item.bgColor = true; } else { console.log(item.id === id); item.bgColor = false; } }); }, // 展开收缩 shrinkClick(box, name) { console.log(box); console.log(this.dynasty.list); } this.onSearch('') console.log(item, name); }, isAvancedClick() { this.isAdvancedSearch = !this.isAdvancedSearch this.$nextTick(() => { var box1Height = document.querySelector('.fbox').offsetHeight; // let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px'; let box2Height = document.querySelector('.fbox1').offsetHeight console.log(box1Height, box2Height); if (box1Height <= box2Height) { document.querySelector('.fbox1').style.height = box1Height + 'px'; } }) }, // 高级搜索 async onSubmit(val) { console.log(val); this.CurrentPage = 1 let Obj = { "keywords": '', //搜索框检索 "name": val.name, //姓名 "alias": val.alias, //别名 "nativePlace": val.nativePlace, //机关 "tagId": val.tagId !== '' ? val.tagId : null, //职业id "official": val.official, //职官 "genderType": val.genderType !== '' ? val.genderType : null, //性别 "dynasty": val.dynasty, //朝代id "dynastyId": null, //朝代id "institution": val.institution, //机构 "bookId": null, //来源id "page": this.CurrentPage, "pageSize": this.pageSize } // // 搜索 await getPList(Obj).then(res => { console.log(res); if (res.success) { console.log(res, '搜索接口'); this.tableData = res.list // 总数量 this.total = res.npage.totalCount } }) console.log(val); }, // 基础搜索 async onSearch(val) { let Obj = { "keywords": val.text, //搜索框检索 "name": "", //姓名 "alias": "", //别名 "nativePlace": "", //机关 "tagId": this.profession.id, //职业id "official": "", //职官 "genderType": null, //性别 "dynasty": null, //朝代id "dynastyId": this.dynasty.id, //朝代id "institution": "", //机构 "bookId": this.source.id, //来源id "page": this.CurrentPage, "pageSize": this.pageSize } // // 搜索 await getPList(Obj).then(res => { if (res.success) { console.log(res, '搜索接口'); this.tableData = res.list // 总数量 this.total = res.npage.totalCount } }) // console.log(val, '士大夫但是'); }, // 热门搜索 HotClick(id) { this.hot.forEach(item => { if (item.id === id) { console.log(item.id === id); item.bgColor = true } else { console.log(item.id === id); item.bgColor = false } }) }, // 展开收缩 shrinkClick(box, name) { console.log(box); console.log(this.dynasty.list); // this.activeBox = this.activeBox === 'a' ? null : 'a'; if (name == '职业') { console.log('职业'); this.professionIndex = this.professionIndex < this.profession.list.length ? this.profession.list .length : 4; this.dynastyIndex = 4 this.activeBox = this.activeBox === 'a' ? null : 'a'; } else { console.log('时期'); this.dynastyIndex = this.dynastyIndex < this.dynasty.list.length ? this.dynasty.list.length : 4; this.professionIndex = 4 this.activeBox = this.activeBox === 'b' ? null : 'b'; } }, // 分页当前页触发事件 CurrentChange(val) { if (this.CurrentPage != val) { this.CurrentPage = val console.log('当前页', val); this.onSearch('') } }, // 上一页 PrevClick(val) { if (this.CurrentPage != val) { this.CurrentPage = val // console.log('上一页', val); // console.log(this.CurrentPage); this.onSearch('') } }, // 下一页 NextClick(val) { if (this.CurrentPage != val) { // console.log('下一页',val); this.CurrentPage = val // console.log(this.CurrentPage); this.onSearch('') } } } } // this.activeBox = this.activeBox === 'a' ? null : 'a'; if (name == "职业") { console.log("职业"); this.professionIndex = this.professionIndex < this.profession.list.length ? this.profession.list.length : 4; this.dynastyIndex = 4; this.activeBox = this.activeBox === "a" ? null : "a"; } else { console.log("时期"); this.dynastyIndex = this.dynastyIndex < this.dynasty.list.length ? this.dynasty.list.length : 4; this.professionIndex = 4; this.activeBox = this.activeBox === "b" ? null : "b"; } }, // 分页当前页触发事件 CurrentChange(val) { if (this.CurrentPage != val) { this.CurrentPage = val; console.log("当前页", val); this.onSearch(""); } }, // 上一页 PrevClick(val) { if (this.CurrentPage != val) { this.CurrentPage = val; // console.log('上一页', val); // console.log(this.CurrentPage); this.onSearch(""); } }, // 下一页 NextClick(val) { if (this.CurrentPage != val) { // console.log('下一页',val); this.CurrentPage = val; // console.log(this.CurrentPage); this.onSearch(""); } }, }, }; </script> <style scoped> /* 表头 */ ::v-deep .el-table__header { margin-bottom: .02rem; } /* 表头 */ ::v-deep .el-table__header { margin-bottom: 0.02rem; } ::v-deep .has-gutter tr>th { background-color: #DDE8F6 !important; font-weight: normal; ::v-deep .has-gutter tr > th { background-color: #dde8f6 !important; font-weight: normal; } } ::v-deep .el-table__header th { height: 0.3rem; line-height: 0.3rem; font-size: 0.14rem; color: #2c2c2c; /* 表头文字颜色为白色，增加对比度 */ margin-bottom: 0.02rem !important; } ::v-deep .el-table__header th { height: .3rem; line-height: .3rem; font-size: .14rem; color: #2C2C2C; /* 表头文字颜色为白色，增加对比度 */ margin-bottom: .02rem !important; } ::v-deep .el-table::before { border: 0; background-color: #fff; } ::v-deep .el-table::before { border: 0; background-color: #fff; } /* 表格 */ ::v-deep .el-table__body td { height: 0.3rem; line-height: 0.3rem; font-size: 0.14rem; color: #2c2c2c !important; font-weight: normal; } /* 表格 */ ::v-deep .el-table__body td { height: .3rem; line-height: .3rem; font-size: .14rem; color: #2C2C2C !important; font-weight: normal; } .abox { height: 1rem; } .abox { height: 1rem; } /* 分页 */ .paging ::v-deep .btn-prev, .paging ::v-deep .btn-next { border: 0; } /* 分页 */ .paging ::v-deep .btn-prev, .paging ::v-deep .btn-next { border: 0; } .paging ::v-deep .btn-prev span, .paging ::v-deep .btn-next span { font-size: 0.12rem; height: 0.3rem; line-height: 0.3rem; background-color: #fff; color: #9e9e9e; text-align: center; border: 1px solid #9e9e9e; padding: 0 0.1rem; } .paging ::v-deep .btn-prev span, .paging ::v-deep .btn-next span { font-size: .12rem; height: .3rem; line-height: .3rem; background-color: #fff; color: #9E9E9E; text-align: center; border: 1px solid #9E9E9E; padding: 0 .1rem; } .paging ::v-deep .el-pager li { font-size: 0.1rem; width: 0.28rem; height: 0.3rem; line-height: 0.3rem; background-color: #fff; color: #9e9e9e; text-align: center; border: 1px solid #9e9e9e; } .paging ::v-deep .el-pager li { font-size: .1rem; width: .28rem; height: .3rem; line-height: .3rem; background-color: #fff; color: #9E9E9E; text-align: center; border: 1px solid #9E9E9E; } /* -------------- */ /* 右侧 */ .rightList { padding-left: 0.2rem !important; /* -------------- */ /* 右侧 */ .rightList { padding-left: .2rem !important; .light { padding: 0.1rem 0.2rem !important; } .light { padding: .1rem .2rem !important; } .lightTop { font-size: 0.14rem !important; } .lightTop { font-size: .14rem !important; } .el-button { font-size: 0.12rem !important; padding: 0.05rem 0.18rem !important; } .el-button { font-size: .12rem !important; padding: .05rem .18rem !important; } .lightBo { font-size: 0.14rem !important; .lightBo { font-size: .14rem !important; .is-leaf { background-color: #c1d3ea !important; color: #2c2c2c !important; font-weight: 400; .is-leaf { background-color: #C1D3EA !important; color: #2C2C2C !important; font-weight: 400; .cell { height: 0.3rem !important; line-height: 0.3rem !important; } } } .cell { .el-table__body-wrapper { .el-table__row { height: 0.46rem !important; line-height: 0.46rem !important; height: .3rem !important; line-height: .3rem !important; } } } .cell { height: 0.3rem !important; line-height: 0.3rem !important; } } } } .el-table__body-wrapper { .el-table__row { height: .46rem !important; line-height: .46rem !important; @media screen and (min-width: 2560px) and (max-width: 3840px) { /* 搜索 */ .Search { margin: 0.35rem 0 0.16rem !important; font-size: 0.12rem !important; } .cell { .Search ::v-deep .advancedSea { font-size: 0.12rem !important; margin-left: 0.35rem; } height: .3rem !important; line-height: .3rem !important; } } .Search ::v-deep .flex-center { height: 80% !important; } } } .hotSearch { font-size: 0.12rem !important; margin-bottom: 0.19rem !important; @media screen and (min-width:2560px)and (max-width:3840px) { li { font-size: 0.12rem !important; margin: 0 0.1rem; } } /* 搜索 */ .Search { margin: .35rem 0 .16rem !important; font-size: .12rem !important; } .advancedSeaTrue, .zhushuju { padding: 0 1.24rem !important; } .Search ::v-deep .advancedSea { font-size: .12rem !important; margin-left: .35rem; } .advancedSeaTrue1 { padding: 0.08rem 0.19rem !important; font-size: 0.14rem !important; } .Search ::v-deep .flex-center { height: 80% !important; } /* Form组件里面的样式 */ ::v-deep .el-row { display: flex; flex-wrap: wrap; margin-top: 0.1rem !important; } .hotSearch { font-size: .12rem !important; margin-bottom: .19rem !important; ::v-deep .el-form-item { display: flex !important; flex-wrap: wrap !important; margin-bottom: 0.18rem !important; } li { font-size: .12rem !important; margin: 0 .1rem; } } ::v-deep .el-form-item__label { font-size: 0.14rem !important; height: 0.3rem !important; display: flex !important; align-items: center !important; } .advancedSeaTrue, .zhushuju { padding: 0 1.24rem !important; } ::v-deep .el-input__inner { font-size: 0.14rem !important; height: 0.3rem !important; } .advancedSeaTrue1 { padding: .08rem .19rem !important; font-size: .14rem !important; } ::v-deep .Formbtn { width: 100% !important; display: flex; justify-content: center; align-items: center; /* Form组件里面的样式 */ ::v-deep .el-row { display: flex; flex-wrap: wrap; margin-top: .1rem !important; } .el-button { width: 0.7rem !important; height: 0.3rem !important; font-size: 0.12rem; } } ::v-deep .el-form-item { display: flex !important; flex-wrap: wrap !important; margin-bottom: .18rem !important; } /* —————————————————————— */ /* 左边的 */ .boox { padding: 0.1rem 0.09rem; min-height: 2rem !important; position: relative; ::v-deep .el-form-item__label { font-size: .14rem !important; height: .3rem !important; display: flex !important; align-items: center !important; } ul { margin-top: 0.16rem !important; } ::v-deep .el-input__inner { font-size: .14rem !important; height: .3rem !important; } h3 { font-size: 0.14rem; margin-left: 0.1rem; } ::v-deep .Formbtn { width: 100% !important; display: flex; justify-content: center; align-items: center; li { height: 0.3rem; line-height: 0.3rem; padding: 0 0.2rem !important; margin: 0.05rem 0 !important; border-radius: 0.3rem !important; } .el-button { width: .7rem !important; height: .3rem !important; font-size: .12rem; .toggleButton1 { position: absolute; bottom: 0.1rem !important; left: 40% !important; } } } .toggleButton { font-size: 0.14rem !important; } } /* —————————————————————— */ /* 左边的 */ .boox { padding: .1rem .09rem; min-height: 2rem !important; position: relative; .zhongjianleft { margin: 0.27rem 0 !important; } ul { margin-top: .16rem !important; } .laiyuan { min-height: 2rem !important; overflow: auto; } h3 { font-size: .14rem; margin-left: .1rem; } /* ———————————————————— */ ::v-deep .uni-input-placeholder { font-size: 0.14rem; height: 100%; display: flex; align-content: center; align-items: center; } li { height: .3rem; line-height: .3rem; padding: 0 .2rem !important; margin: .05rem 0 !important; border-radius: .3rem !important; ::v-deep .ffff { border-radius: 0.3rem !important; height: 0.36rem !important; } } ::v-deep .widget_button { border-radius: inherit !important; margin-right: 0.02rem !important; background-color: #597aa5; } .toggleButton1 { position: absolute; bottom: .1rem !important; left: 40% !important; } /* 右侧 */ .rightList { padding-left: 0.2rem !important; .toggleButton { font-size: .14rem !important; } } .light { padding: 0.1rem 0.2rem !important; } .zhongjianleft { margin: .27rem 0 !important; } .lightTop { font-size: 0.14rem !important; } .laiyuan { min-height: 2rem !important; } .el-button { font-size: 0.12rem !important; padding: 0.05rem 0.18rem !important; } /* ———————————————————— */ ::v-deep .uni-input-placeholder { font-size: .14rem; height: 100%; display: flex; align-content: center; align-items: center; } .lightBo { font-size: 0.14rem !important; ::v-deep .ffff { border-radius: .3rem !important; height: .36rem !important; } ::v-deep .widget_button { border-radius: inherit !important; margin-right: .02rem !important; background-color: #597AA5; } /* 右侧 */ .rightList { padding-left: .2rem !important; .light { padding: .1rem .2rem !important; } .lightTop { font-size: .14rem !important; } .el-button { font-size: .12rem !important; padding: .05rem .18rem !important; } .lightBo { font-size: .14rem !important; .is-leaf { background-color: #C1D3EA !important; color: #2C2C2C !important; font-weight: 400; .cell { height: .3rem !important; line-height: .3rem !important; } } } .el-table__body-wrapper { .el-table__row { height: .46rem !important; line-height: .46rem !important; .cell { height: .3rem !important; line-height: .3rem !important; } } } } } @media screen and (min-width:1366px) and (max-width:1920px) { /* 搜索 */ .Search { margin: .35rem 0 .16rem !important; font-size: .12rem !important; } .Search ::v-deep .advancedSea { font-size: .12rem !important; margin-left: .35rem; } .is-leaf { background-color: #c1d3ea !important; color: #2c2c2c !important; font-weight: 400; .Search ::v-deep .flex-center { height: 80% !important; } .cell { height: 0.3rem !important; line-height: 0.3rem !important; } } } .hotSearch { font-size: .12rem !important; margin-bottom: .19rem !important; .el-table__body-wrapper { .el-table__row { height: 0.46rem !important; line-height: 0.46rem !important; li { font-size: .12rem !important; margin: 0 .1rem; } } .advancedSeaTrue1{ border: 1px solid #C1D3EA; } .advancedSeaTrue, .zhushuju { padding: 0 1.24rem !important; } .cell { height: 0.3rem !important; line-height: 0.3rem !important; } } } } } .advancedSeaTrue1 { padding: .08rem .19rem !important; font-size: .14rem !important; } @media screen and (min-width: 1366px) and (max-width: 1920px) { /* 搜索 */ .Search { margin: 0.35rem 0 0.16rem !important; font-size: 0.12rem !important; } /* Form组件里面的样式 */ ::v-deep .el-row { display: flex; flex-wrap: wrap; margin-top: .1rem !important; } .Search ::v-deep .advancedSea { font-size: 0.12rem !important; margin-left: 0.35rem; } ::v-deep .el-form-item { display: flex !important; flex-wrap: wrap !important; margin-bottom: .18rem !important; } .Search ::v-deep .flex-center { height: 80% !important; } ::v-deep .el-form-item__label { font-size: .14rem !important; height: .3rem !important; display: flex !important; align-items: center !important; } .hotSearch { font-size: 0.12rem !important; margin-bottom: 0.19rem !important; ::v-deep .el-input__inner { font-size: .14rem !important; height: .3rem !important; } li { font-size: 0.12rem !important; margin: 0 0.1rem; } } .advancedSeaTrue1 { border: 1px solid #c1d3ea; } .advancedSeaTrue, .zhushuju { padding: 0 1.24rem !important; } ::v-deep .Formbtn { width: 100% !important; display: flex; justify-content: center; align-items: center; .advancedSeaTrue1 { padding: 0.08rem 0.19rem !important; font-size: 0.14rem !important; } .el-button { width: .7rem !important; height: .3rem !important; font-size: .12rem; /* Form组件里面的样式 */ ::v-deep .el-row { display: flex; flex-wrap: wrap; margin-top: 0.1rem !important; } } } ::v-deep .el-form-item { display: flex !important; flex-wrap: wrap !important; margin-bottom: 0.18rem !important; } /* —————————————————————— */ /* 左边的 */ .boox { padding: .1rem .09rem; min-height: 2rem !important; position: relative; ::v-deep .el-form-item__label { font-size: 0.14rem !important; height: 0.3rem !important; display: flex !important; align-items: center !important; } ul { margin-top: .16rem !important; margin-bottom: .2rem !important; } ::v-deep .el-input__inner { font-size: 0.14rem !important; height: 0.3rem !important; } h3 { font-size: .14rem; margin-left: .1rem; } ::v-deep .Formbtn { width: 100% !important; display: flex; justify-content: center; align-items: center; li { height: .3rem; line-height: .3rem; padding: 0 .2rem !important; margin: .05rem 0 !important; border-radius: .3rem !important; .el-button { width: 0.7rem !important; height: 0.3rem !important; font-size: 0.12rem; } } } /* —————————————————————— */ /* 左边的 */ .boox { padding: 0.1rem 0.09rem; min-height: 2rem !important; position: relative; .toggleButton1 { position: absolute; bottom: .1rem !important; left: 40% !important; } ul { margin-top: 0.16rem !important; margin-bottom: 0.2rem !important; } .toggleButton { font-size: .14rem !important; } } h3 { font-size: 0.14rem; margin-left: 0.1rem; } .zhongjianleft { margin: .27rem 0 !important; } li { height: 0.3rem; line-height: 0.3rem; padding: 0 0.2rem !important; margin: 0.05rem 0 !important; border-radius: 0.3rem !important; } .laiyuan { min-height: 2rem !important; } .toggleButton1 { position: absolute; bottom: 0.1rem !important; left: 40% !important; } /* ———————————————————— */ ::v-deep .uni-input-placeholder { font-size: .14rem; height: 100%; display: flex; align-content: center; align-items: center; } .toggleButton { font-size: 0.14rem !important; } } ::v-deep .ffff { border-radius: .3rem !important; height: .36rem !important; } .zhongjianleft { margin: 0.27rem 0 !important; } ::v-deep .widget_button { border-radius: inherit !important; margin-right: .02rem !important; background-color: #597AA5; } .laiyuan { min-height: 2rem !important; overflow: auto; } /* -------------------- */ /* 右侧 */ .rightList { width: 100%; padding-left: .2rem !important; /* ———————————————————— */ ::v-deep .uni-input-placeholder { font-size: 0.14rem; height: 100%; display: flex; align-content: center; align-items: center; } .light { padding: .1rem .2rem !important; } ::v-deep .ffff { border-radius: 0.3rem !important; height: 0.36rem !important; } .lightTop { font-size: .14rem !important; } ::v-deep .widget_button { border-radius: inherit !important; margin-right: 0.02rem !important; background-color: #597aa5; } .el-button { font-size: .12rem !important; padding: .05rem .18rem !important; } /* -------------------- */ /* 右侧 */ .rightList { width: 100%; padding-left: 0.2rem !important; .lightBo { font-size: .14rem !important; .light { padding: 0.1rem 0.2rem !important; } .is-leaf { background-color: #C1D3EA !important; color: #2C2C2C !important; font-weight: 400; .lightTop { font-size: 0.14rem !important; } .cell { .el-button { font-size: 0.12rem !important; padding: 0.05rem 0.18rem !important; } height: .3rem !important; line-height: .3rem !important; } } } .lightBo { font-size: 0.14rem !important; .el-table__body-wrapper { .el-table__row { height: .46rem !important; line-height: .46rem !important; .is-leaf { background-color: #c1d3ea !important; color: #2c2c2c !important; font-weight: 400; .cell { .cell { height: 0.3rem !important; line-height: 0.3rem !important; } } } height: .3rem !important; line-height: .3rem !important; } } .el-table__body-wrapper { .el-table__row { height: 0.46rem !important; line-height: 0.46rem !important; } } } .cell { height: 0.3rem !important; line-height: 0.3rem !important; } } } } } * { box-sizing: border-box; } * { box-sizing: border-box; } .hotSearch { font-size: .12rem; margin-bottom: .19rem; .hotSearch { font-size: 0.12rem; margin-bottom: 0.19rem; li { font-size: .12rem; margin: 0 .1rem; } } li { font-size: 0.12rem; margin: 0 0.1rem; } } /* .a { /* .a { height: 2rem; } @@ -1058,53 +1228,52 @@ height: 100px; } */ .box { transition: height 0.3s; /* 添加过渡效果 */ overflow: hidden; /* 避免内容溢出 */ .box { transition: height 0.3s; /* 添加过渡效果 */ overflow: hidden; /* 避免内容溢出 */ } } /* 左边的 */ .boox { width: 100%; padding: 0.1rem 0.09rem; min-height: 2rem !important; position: relative; border: 1px solid #c1d3ea !important; /* 左边的 */ .boox { width: 100%; padding: .1rem .09rem; min-height: 2rem !important; position: relative; border: 1px solid #c1d3ea !important; ul { margin-top: 0.16rem !important; } ul { margin-top: .16rem !important; } h3 { font-size: 0.14rem; margin-left: 0.1rem; } h3 { font-size: .14rem; margin-left: .1rem; } li { height: 0.3rem; line-height: 0.3rem; padding: 0 0.2rem !important; margin: 0.05rem 0 !important; border-radius: 0.3rem !important; font-size: 0.14rem; } li { height: .3rem; line-height: .3rem; padding: 0 .2rem !important; margin: .05rem 0 !important; border-radius: .3rem !important; font-size: .14rem; } .toggleButton1 { position: absolute; bottom: 0.1rem !important; left: 40% !important; } .toggleButton1 { position: absolute; bottom: .1rem !important; left: 40% !important; } .toggleButton { font-size: 0.14rem !important; } } .toggleButton { font-size: .14rem !important; } } ::v-deep .el-table th, ::v-deep .el-table td { text-align: center; } </style> ::v-deep .el-table th, ::v-deep .el-table td { text-align: center; } </style> src/static/initialize.css
@@ -5,8 +5,8 @@ } html { font-size: calc(100vw / 1440 * 96) !important; /* font-size: 10px; */ /* font-size: calc(100vw / 1440 * 96) !important; */ font-size: 126px; } body {
