7.26 0.2

public/static/white.css

@@ -8,6 +8,7 @@
     .lbg_color3{
         background-color: #eeeeee;  
     }
+   
     /* input 框*/
     /* input */
 .scal .textselsect .el-input__inner{
@@ -60,4 +61,7 @@
         border:2px solid #000;
         border-radius: 5px;
         box-sizing: border-box;
+      }
+      .text_color{
+        color: #747474;
       }

src/components/Forget/index.vue

@@ -0,0 +1,476 @@
+/*Forget*/
+<template>
+  <div>
+    <transition name="marsk-fade">
+      <div v-if="forgetShow" class="marsk" />
+    </transition>
+    <transition name="slide-fade">
+      <div class="forget" v-if="forgetShow">
+        <i class="el-icon-close" @click="close"></i>
+        <div class="steps">
+          <p>
+            <span :class="[active === 0 ? 'on' : '']">手机/邮箱验证</span>
+            &gt;
+            <span :class="[active === 1 ? 'on' : '']">设置新密码</span>
+            &gt;
+            <span :class="[active === 2 ? 'on' : '']">密码设置成功</span>
+          </p>
+        </div>
+        <h3 v-if="active !== 2" class="title">找回密码</h3>
+        <el-form
+          v-show="active === 0"
+          ref="emailForm"
+          class="forget-form"
+          :model="emailForm"
+          :rules="emailRules"
+          label-position="left"
+        >
+          <el-form-item prop="email">
+            <el-input
+              ref="email"
+              v-model="emailForm.email"
+              type="text"
+              size="small"
+              name="email"
+              placeholder="请输入手机号码或邮箱地址"
+            >
+              <span slot="prefix" class="solt">手机/邮箱</span>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="code">
+            <el-input
+              ref="code"
+              v-model="emailForm.code"
+              type="text"
+              size="small"
+              style="width: 220px"
+              name="code"
+              placeholder="请输入验证码"
+            >
+              <span slot="prefix" class="solt">验证码</span>
+            </el-input>
+            <el-button
+              class="code"
+              type="danger"
+              size="small"
+              :disabled="countDown > 0"
+              plain
+              @click.native.prevent="getCode"
+              >{{ countDown > 0 ? `${countDown}s` : '获取验证码' }}</el-button
+            >
+          </el-form-item>
+          <el-button
+            type="danger"
+            size="small"
+            class="next-btn"
+            @click.native.prevent="Next"
+            >下一步</el-button
+          >
+        </el-form>
+
+        <el-form
+          v-show="active === 1"
+          ref="setForm"
+          class="forget-form"
+          :model="setForm"
+          :rules="setRules"
+          label-position="left"
+        >
+          <el-form-item prop="pwd">
+            <el-input
+              ref="pwd"
+              v-model="setForm.pwd"
+              :type="setForm.pwdType"
+              size="small"
+              name="pwd"
+              placeholder="请输设置新密码"
+            >
+              <span slot="prefix" class="solt">新密码</span>
+              <svg-icon
+                slot="suffix"
+                :icon-class="
+                  setForm.pwdType === 'password' ? 'eye' : 'eye-open'
+                "
+                @click="showPwd"
+              />
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="spwd">
+            <el-input
+              ref="spwd"
+              v-model="setForm.spwd"
+              :type="setForm.spwdType"
+              size="small"
+              name="spwd"
+              placeholder="请确认新密码"
+            >
+              <span slot="prefix" class="solt">确认密码</span>
+              <svg-icon
+                slot="suffix"
+                :icon-class="
+                  setForm.spwdType === 'password' ? 'eye' : 'eye-open'
+                "
+                @click="showSpwd"
+              />
+            </el-input>
+          </el-form-item>
+          <el-button
+            type="danger"
+            size="small"
+            class="next-btn"
+            @click.native.prevent="Next"
+            >下一步</el-button
+          >
+        </el-form>
+
+        <div v-show="active !== 2" class="link">
+          已找回密码？
+          <span class="link-item" @click="toPage('login')">立即登录</span>
+        </div>
+
+        <div v-show="active === 2" class="success">
+          <i class="el-icon-circle-check" />
+          <p>恭喜您，成功找回密码！</p>
+          <div class="link">
+            <span class="link-item" @click="toPage('login')">返回登录页面</span>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { validEmail, validCode, validPwd,validMobile } from '@/utils/validate'
+import { request, enPassword } from '@/utils/request'
+
+export default {
+  name: 'Forget',
+  props: {
+    forgetShow: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  data() {
+    const validateEmail = (rule, value, callback) => {
+      if (value) {
+        if (!validEmail(value)&&!validMobile(value)) {
+          callback(new Error('请输入正确的手机号码或邮箱地址'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入手机号码或邮箱地址'))
+      }
+    }
+    const validateCode = (rule, value, callback) => {
+      if (value) {
+        if (!validCode(value)) {
+          callback(new Error('验证码为6位数字'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入验证码'))
+      }
+    }
+    const validatePwd = (rule, value, callback) => {
+      if (value) {
+        if (!validPwd(value)) {
+          callback(new Error('6~18位，只能包含字母、数字和下划线'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入密码'))
+      }
+    }
+    const validateSpwd = (rule, value, callback) => {
+      if (value) {
+        if (value !== this.setForm.pwd) {
+          callback(new Error('两次密码不一致'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请再次输入密码'))
+      }
+    }
+    return {
+      active: 0,
+      countDown: '00',
+      emailForm: {
+        email: '',
+        code: '',
+      },
+      emailRules: {
+        email: [{ required: true, trigger: 'blur', validator: validateEmail }],
+        code: [{ required: true, trigger: 'blur', validator: validateCode }],
+      },
+      setForm: {
+        pwd: '',
+        spwd: '',
+        pwdType: 'password',
+        spwdType: 'password',
+      },
+      setRules: {
+        pwd: [{ required: true, trigger: 'blur', validator: validatePwd }],
+        spwd: [{ required: true, trigger: 'blur', validator: validateSpwd }],
+      },
+    }
+  },
+  created(){
+    this.active=0
+  },
+  methods: {
+    close() {
+      this.$emit('putForget', false)
+    },
+    showPwd() {
+      this.setForm.pwdType =
+        this.setForm.pwdType === 'password' ? '' : 'password'
+      this.$nextTick(() => {
+        this.$refs.pwd.focus()
+      })
+    },
+    showSpwd() {
+      this.setForm.spwdType =
+        this.setForm.spwdType === 'password' ? '' : 'password'
+      this.$nextTick(() => {
+        this.$refs.spwd.focus()
+      })
+    },
+    theLast() {
+      this.countDown = 60
+      const timer = setInterval(() => {
+        if (this.countDown > 0) {
+          this.countDown--
+          this.countDown < 10 && (this.countDown = '0' + this.countDown)
+        } else {
+          clearInterval(timer)
+        }
+      }, 1000)
+    },
+    getCode() {
+      if (this.countDown > 0) return this.$message.error('请不要频繁点击!')
+      if (!this.emailForm.email) return this.$message.error('请输入手机号码或邮箱地址!')
+      if (!validEmail(this.emailForm.email)&&!validMobile(this.emailForm.email))
+        return this.$message.error('请输入正确的手机号码或邮箱地址!')
+        let channel=validEmail(this.emailForm.email)?'2':'1'
+      const params = {
+        transCode: 'A00001',
+        mailOrPhone: this.emailForm.email,
+        type: '2',
+        channel:channel,
+
+      }
+      request(params)
+        .then((res) => {
+          channel==='2'
+          ?this.$message.success(
+            '验证码已发送至邮箱：' + this.emailForm.email + ',请注意查收！'
+          )
+          :this.$message.success(
+            '验证码已发送至手机号码：' + this.emailForm.email + ',请注意查收！'
+          )
+          
+          this.theLast()
+        })
+        .catch((err) => {
+          this.$message.error(err.returnMsg)
+        })
+    },
+    Next() {
+      let channel=validEmail(this.emailForm.email)?'2':'1'
+      if (this.active === 0) {
+        this.$refs.emailForm.validate((valid) => {
+          if (valid) {
+            this.active = 1
+          } else {
+            return false
+          }
+        })
+      } else if (this.active === 1) {
+        this.$refs.setForm.validate((valid) => {
+          if (valid) {
+            const params = {
+              transCode: 'B00026',
+              newPassword: enPassword(this.setForm.pwd),
+              mailOrPhone: this.emailForm.email,
+              verificationCode: this.emailForm.code,
+              channel:channel,
+            }
+            request(params)
+              .then((res) => {
+                this.$message.success('恭喜您，成功找回密码！')
+                this.active = 2
+                this.close()
+              })
+              .catch((err) => {
+                this.active = 0
+                this.$message.error('请重新输入验证码！')
+              })
+          } else {
+            return false
+          }
+        })
+      }
+    },
+    toPage(type) {
+      this.$emit('putForget', { type: type })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+
+.marsk-fade-enter-active,
+.marsk-fade-leave-active {
+  transition: all 0.5s;
+}
+.marsk-fade-enter,
+.marsk-fade-leave-to {
+  opacity: 0;
+}
+.marsk {
+  @include position(fixed, 0, 0, 0, 0, 1000);
+  background: rgba(4, 112, 204, 0.05);
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateY(7.48rem);
+}
+
+.forget {
+  @include position(fixed, 40%, auto, 50%, auto, 1001);
+  @include w_h(400px);
+  min-height: 430px;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  line-height: 22px;
+  color: $color_3;
+  background: $color_f;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.4);
+  .el-icon-close {
+    @include position(absolute, 12px, auto, auto, 20px, 1001);
+    font-size: 16px;
+    color: $color_9;
+    transition: all 0.3s;
+    &:hover {
+      cursor: pointer;
+      color: $color_on;
+    }
+  }
+  .steps {
+    @include w_h(100%, 40px);
+    line-height: 40px;
+    text-align: center;
+    color: #78a4db;
+    background: #004498;
+    .on {
+      color: $color_f;
+    }
+  }
+  .title {
+    margin-top: 30px;
+    font-size: 20px;
+    text-align: center;
+    color: $color_3;
+  }
+  &-form {
+    @include w_h();
+    padding: 20px 30px;
+    .solt {
+      padding: 0 6px;
+      font-size: 12px;
+      color: $color_6;
+    }
+    .code {
+      @include position(absolute, 4px, auto, auto, 0);
+      @include w_h(100px);
+      font-size: 12px;
+      vertical-align: middle;
+      cursor: pointer;
+      user-select: none;
+    }
+    .agree {
+      text-align: left;
+      font-size: 12px;
+      a {
+        color: #409eff;
+      }
+    }
+    .next-btn {
+      margin: 30px auto 0px;
+      @include w_h();
+    }
+  }
+  .link {
+    margin-bottom: 30px;
+    text-align: center;
+    color: $color_9;
+    .link-item {
+      color: $color_on;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  .success {
+    font-size: 14px;
+    text-align: center;
+    .el-icon-circle-check {
+      margin-top: 50px;
+      font-size: 60px;
+      color: #41b300;
+    }
+    p {
+      margin: 20px auto;
+      font-size: 20px;
+      font-weight: 700;
+      color: $color_3;
+    }
+    a {
+      font-size: 14px;
+      color: $color_9;
+    }
+    a:hover {
+      color: $color_on;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+@import '@/styles/variables.scss';
+@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
+  .forget-form .el-input input {
+    font-size: 12px;
+    color: $color_9;
+  }
+}
+.forget-form {
+  .el-input {
+    &__inner:focus {
+      border-color: $color_9;
+    }
+    &--prefix .el-input__inner {
+      color: $color_6;
+      padding-left: 70px;
+    }
+  }
+}
+</style>>

src/components/Login/index.vue

@@ -0,0 +1,613 @@
+/*Login*/
+<template>
+  <div>
+    <transition name="marsk-fade">
+      <div v-if="loginShow" class="marsk" />
+    </transition>
+    <transition name="slide-fade">
+      <div class="login" v-if="loginShow">
+        <i class="el-icon-close" @click="close" v-if="closeShow"></i>
+        <div class="steps" v-if="formFlog===1">
+          <p>手机验证</p>
+        </div>
+        <el-form
+          ref="loginForm"
+          class="login-form"
+          :model="loginForm"
+          :rules="loginRules"
+          auto-complete="on"
+          label-position="left"
+          v-if="formFlog===0"
+        >
+          <div class="loginTitle">
+            <h3 class="title" :class="index==0?'active':''"  @click="loginTob(0)" >账户登录</h3>
+            <h3 class="title" :class="index!=0?'active':''"  @click="loginTob(1)">短信登录</h3>
+          </div>
+          <el-form-item prop="username" v-if="loginTitle === 0">
+            <el-input
+              ref="username"
+              v-model="loginForm.username"
+              type="text"
+              size="small"
+              name="username"
+              placeholder="邮箱/用户名"
+              auto-complete="on"
+            />
+          </el-form-item>
+          <el-form-item prop="password" v-if="loginTitle === 0">
+            <el-input
+              ref="password"
+              v-model="loginForm.password"
+              :type="passwordType"
+              size="small"
+              name="password"
+              placeholder="请输入密码"
+              auto-complete="on"
+              @keyup.enter.native="Login"
+            >
+              <svg-icon
+                slot="suffix"
+                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+                @click="showPwd"
+              />
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="mobile" v-if="loginTitle === 1">
+            <el-input
+              ref="mobile"
+              v-model="loginForm.mobile"
+              type="text"
+              size="small"
+              style="width: 223px"
+              name="mobile"
+              placeholder="请输入手机号码"
+              auto-complete="on"
+            />
+            <el-button
+              class="code"
+              type="danger"
+              size="small"
+              :disabled="countDown > 0"
+              plain
+              @click.native.prevent="getCode"
+              >{{ countDown > 0 ? `${countDown}s` : "获取验证码" }}</el-button
+            >
+          </el-form-item>
+          <el-form-item prop="code" v-if="loginTitle === 1">
+            <el-input
+              ref="code"
+              v-model="loginForm.code"
+              type="text"
+              size="small"
+              name="code"
+              placeholder="请输入验证码"
+              auto-complete="on"
+            />
+          </el-form-item>
+
+          <el-button
+            type="danger"
+            size="small"
+            class="login-btn"
+            :loading="loading"
+            @click.native.prevent="Login"
+            >登录</el-button
+          >
+          <div class="link">
+            <span class="link-item" @click="toPage('forget')">忘记密码</span>
+            <span class="link-item" @click="toPage('register')">免费注册</span>
+          </div>
+        </el-form>
+        <el-form
+          ref="mobileForm"
+          class="login-form mobileForm"
+          :model="mobileForm"
+          :rules="mobileRules"
+          auto-complete="on"
+          label-position="left"
+          v-if="formFlog===1"
+        >
+          <el-form-item prop="zmobile">
+            <el-input
+              ref="zmobile"
+              v-model="mobileForm.zmobile"
+              type="text"
+              size="small"
+              class="mobileItem"
+              name="zmobile"
+              placeholder="请输入手机号码"
+              auto-complete="on"
+              ><span slot="prefix" class="solt">手机号码</span></el-input
+            >
+          </el-form-item>
+          <el-form-item prop="zcode">
+            <el-input
+              ref="zcode"
+              v-model="mobileForm.zcode"
+              type="text"
+              size="small"
+              class="mobileItem"
+              style="width: 223px"
+              name="zcode"
+              placeholder="请输入验证码"
+              auto-complete="on"
+              ><span slot="prefix" class="solt">验证码</span></el-input
+            >
+            <el-button
+              class="code"
+              type="danger"
+              size="small"
+              :disabled="countDown > 0"
+              plain
+              @click.native.prevent="getZCode"
+              >{{ countDown > 0 ? `${countDown}s` : "获取验证码" }}</el-button
+            >
+          </el-form-item>
+          <div class="agree">
+            <el-checkbox v-model="mobileForm.checked"
+              >点击“下一步”按钮将视为您已阅读并同意</el-checkbox
+            >
+            <span class="link-item" @click="toPage('protocol')"
+              >《注册协议》</span
+            >
+          </div>
+          <el-button
+            type="danger"
+            size="small"
+            class="next-btn"
+            @click.native.prevent="Next"
+            >下一步</el-button
+          >
+        </el-form>
+      </div>
+      <!-- <div class="login">
+        <p>手机验证<i class="el-icon-close" @click="close" style="position:none"></i></p>
+        <div></div>
+      </div> -->
+    </transition>
+  </div>
+</template>
+
+<script>
+import { request, enPassword } from "@/utils/request";
+import { setToken } from "@/utils/token";
+import { validPwd, validMobile, validCode } from "@/utils/validate";
+
+export default {
+  name: "Login",
+  props: {
+    loginShow: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  data() {
+    const validatePwd = (rule, value, callback) => {
+      if (value) {
+        if (!validPwd(value)) {
+          callback(new Error("6~18位，只能包含字母、数字和下划线"));
+        } else {
+          callback();
+        }
+      } else {
+        callback(new Error("请输入密码"));
+      }
+    };
+    const validateMobile = (rule, value, callback) => {
+      if (value) {
+        console.log(value)
+        if (!validMobile(value)) {
+          callback(new Error("请输入正确的手机号码"));
+        } else {
+          callback();
+        }
+      } else {
+        callback(new Error("请输入手机号码"));
+      }
+    };
+    const validateCode = (rule, value, callback) => {
+      if (value) {
+        if (!validCode(value)) {
+          callback(new Error("验证码为6位数字"));
+        } else {
+          callback();
+        }
+      } else {
+        callback(new Error("请输入验证码"));
+      }
+    };
+    return {
+      closeShow:true,
+      countDown: "00",
+      loginTitle: 0,
+      formFlog:0,
+       index:0,
+      mobileFlog:'',
+      loginForm: {
+        username: "",
+        password: "",
+        mobile: "",
+        code: "",
+      },
+      mobileForm: {
+        zmobile: '',
+        zcode: '',
+        checked:''
+      },
+      loginRules: {
+        username: [
+          { required: true, message: "请输入邮箱/用户名", trigger: "blur" },
+        ],
+        password: [{ required: true, trigger: "blur", validator: validatePwd }],
+        mobile: [
+          { required: true, trigger: "blur", validator: validateMobile },
+        ],
+        code: [{ required: true, trigger: "blur", validator: validateCode }],
+      },
+      mobileRules:{
+        zmobile: [
+          { required: true, trigger: "blur", validator: validateMobile },
+        ],
+        zcode: [{ required: true, trigger: "blur", validator: validateCode }],
+      },
+      
+      loading: false,
+      passwordType: "password",
+    };
+  },
+  methods: {
+    close() {
+      this.$emit("putLogin", false);
+    },
+    showPwd() {
+      this.passwordType =
+        this.passwordType === "password" ? "text" : "password";
+      this.$nextTick(() => {
+        this.$refs.password.focus();
+      });
+    },
+    theLast() {
+      this.countDown = 60;
+      const timer = setInterval(() => {
+        if (this.countDown > 0) {
+          this.countDown--;
+          this.countDown < 10 && (this.countDown = "0" + this.countDown);
+        } else {
+          clearInterval(timer);
+        }
+      }, 1000);
+    },
+    getCode() {
+      if (this.countDown > 0) return this.$message.error("请不要频繁点击!");
+      if (!this.loginForm.mobile) return this.$message.error("请输入手机号码!");
+      if (!validMobile(this.loginForm.mobile))
+        return this.$message.error("请输入正确的手机号码!");
+      const params = {
+        transCode: "A00001",
+        mailOrPhone: this.loginForm.mobile,
+        type: "3",
+        channel: '1',
+      };
+      request(params)
+        .then((res) => {
+          this.$message.success(
+            `验证码已发送至手机号： ${this.loginForm.mobile} ,请注意查收！`
+          );
+          this.theLast();
+        })
+        .catch((err) => {});
+    },
+    getZCode() {
+            console.log(1111);
+      console.log(this.mobileForm.zmobile);
+      console.log(22222)
+      if (this.countDown > 0) return this.$message.error("请不要频繁点击!");
+      if (!this.mobileForm.zmobile) return this.$message.error("请输入手机号码!");
+      if (!validMobile(this.mobileForm.zmobile))
+        return this.$message.error("请输入正确的手机号码!");
+      const params = {
+        transCode: "A00001",
+        mailOrPhone: this.mobileForm.zmobile,
+        type: this.mobileFlog,
+        channel: '1',
+      };
+      request(params)
+        .then((res) => {
+          this.$message.success(
+            `验证码已发送至手机号： ${this.mobileForm.zmobile} ,请注意查收！`
+          );
+          this.theLast();
+        })
+        .catch((err) => {});
+    },
+    loginTob(type){
+      this.index=type;
+      this.loginTitle=type
+      this.$refs.loginForm.clearValidate()
+      this.loginForm={
+        username: "",
+        password: "",
+        mobile: "",
+        code: "",
+      }
+    },
+    Next(){
+      this.$refs.mobileForm.validate((valid) => {
+          if (valid) {
+            if (this.mobileForm.checked) {
+              let param={
+                transCode: "A00008",
+                authCode:this.mobileForm.zcode,
+                phoneNo:this.mobileForm.zmobile,
+              };
+              request(param)
+                .then(res=>{
+                  this.$message.success("登录成功!");
+                  this.loginForm.password = "";
+                  this.loading = false;
+                  this.formFlog=0
+                  this.close();
+                })
+                .catch(err=>{})
+            } else {
+              this.$alert('请仔细阅读《注册协议》，并同意！', '提示', {
+                confirmButtonText: '确定',
+                callback: (action) => {},
+              })
+            }
+          } else {
+            return false
+          }
+        })
+    },
+    getUserData(){
+      let param={
+        transCode: "B00001",
+      };
+      request(param)
+        .then(res=>{
+          if(res.mobileNo&&res.userType==='2'&&this.loginTitle === 0){
+            this.mobileForm.zmobile=res.mobileNo
+            this.mobileFlog='5'
+            this.formFlog=1
+            this.closeShow=false
+            return
+          }
+          if(!res.mobileNo&&res.userType==='0'){
+            this.mobileFlog='6'
+            this.formFlog=1
+            this.closeShow=false
+            return
+          }
+              this.$message.success("登录成功!");
+              this.loginForm.password = "";
+              this.loading = false;
+              this.close();
+        })
+        .catch(err=>{})
+    },
+    Login() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let params =
+            this.loginTitle === 0
+              ? {
+                  transCode: "A00002",
+                  loginName: this.loginForm.username,
+                  authCode: "",
+                  password: enPassword(this.loginForm.password),
+                  type: "",
+                }
+              : {
+                  transCode: "A00002",
+                  loginName: "",
+                  authCode: this.loginForm.code,
+                  password: "",
+                  type: "0",
+                  phoneNo: this.loginForm.mobile,
+                };
+          request(params)
+            .then((res) => {
+              sessionStorage.setItem("userRole", res.userRole);
+              this.$store.dispatch("user/changeState", {
+                key: "token",
+                value: res.clientToken,
+              });
+              this.$store.dispatch("user/changeState", {
+                key: "name",
+                value: res.nickName,
+              });
+              this.$store.dispatch("user/changeState", {
+                key: "userId",
+                value: res.userId,
+              });
+              this.$store.dispatch("user/changeState", {
+                key: "userType",
+                value: res.userType,
+              });
+              this.$store.dispatch("user/changeState", {
+                key: "realStatus",
+                value: res.authenticationState,
+              });
+              this.$store.dispatch("user/changeState", {
+                key: "cfdUrl",
+                value: res.cfdUrl,
+              });
+              this.$store.dispatch("user/changeState", {
+                key: "userRole",
+                value: res.userRole,
+              });
+              this.$store.dispatch("user/changeState", {
+                key: "loginStatus",
+                value: true,
+              });
+              // this.$store.dispatch("user/changeState", {
+              //   key: "mobileNo",
+              //   value: res.mobileNo,
+              // });
+              setToken(res.clientToken);
+              this.getUserData()
+            })
+            .catch((err) => {
+              this.loading = false;
+            });
+        } else {
+          return false;
+        }
+      });
+    },
+    toPage(type) {
+      this.$emit("putLogin", { type: type });
+      if (type == 'protocol') {
+        this.$router.push('/protocol')
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/variables.scss";
+@import "@/styles/mixin.scss";
+
+.marsk-fade-enter-active,
+.marsk-fade-leave-active {
+  transition: all 0.5s;
+}
+.marsk-fade-enter,
+.marsk-fade-leave-to {
+  opacity: 0;
+}
+div /deep/.mobileItem .el-input__inner{
+    text-indent: 3em;
+  }
+.marsk {
+  @include position(fixed, 0, 0, 0, 0, 1000);
+  background: rgba(4, 112, 204, 0.05);
+}
+.title {
+   padding-bottom: 20px;
+}
+.active{
+  color:#F56C6C;
+  border-bottom: 1px solid #F56C6C;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateY(7.48rem);
+}
+.loginTitle {
+  display: flex;
+  justify-content: space-around;
+  h3:hover {
+    // text-decoration: underline;
+    color: #F56C6C ;
+    cursor: pointer;
+  }
+}
+
+.login {
+  @include position(fixed, 40%, auto, 50%, auto, 1001);
+  @include w_h(400px);
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  line-height: 22px;
+  color: $color_3;
+  background: $color_f;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.4);
+  .el-icon-close {
+    @include position(absolute, 15px, auto, auto, 14px, 1001);
+    font-size: 16px;
+    color: $color_9;
+    transition: all 0.3s;
+    &:hover {
+      cursor: pointer;
+      color: $color_on;
+    }
+  }
+  &-form {
+    @include w_h();
+    padding: 60px 40px;
+    .title {
+      margin-bottom: 30px;
+      font-size: 20px;
+      text-align: center;
+    }
+    .solt {
+      padding: 0 6px;
+      font-size: 12px;
+      color: $color_6;
+    }
+    .login-btn {
+      margin: 10px auto 30px;
+      @include w_h();
+    }
+    .link {
+      @include flex(center);
+      color: $color_9;
+      .link-item {
+        margin: 0 10px;
+        &:hover {
+          cursor: pointer;
+          color: $color_on;
+        }
+      }
+    }
+  }
+  .agree {
+      text-align: left;
+      font-size: 12px;
+      .link-item {
+        color: #409eff;
+        &:hover {
+          cursor: pointer;
+          text-decoration: underline;
+        }
+      }
+    }
+    .next-btn {
+      margin: 30px auto 0px;
+      @include w_h();
+    }
+  
+  .steps {
+    @include w_h(100%, 40px);
+    line-height: 40px;
+    text-align: center;
+    color: #fff;
+    background: #004498;
+    .on {
+      color: $color_f;
+    }
+    position: absolute;
+  }
+}
+</style>
+
+<style lang="scss">
+@import "@/styles/variables.scss";
+@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
+  .login-form .el-input input {
+    font-size: 12px;
+    color: $color_9;
+  }
+}
+.login-form {
+  .el-input {
+    &__inner:focus {
+      border-color: $color_9;
+    }
+  }
+}
+</style>
+

src/components/SvgIcon/index.vue

@@ -19,12 +19,13 @@ export default {
   props: {
     iconClass: {
       type: String,
-      required: true
+      required: true,
+      default: '',
     },
     className: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
   computed: {
     isExternal() {
@@ -43,10 +44,10 @@ export default {
     styleExternalIcon() {
       return {
         mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

src/components/Toast/index.vue

@@ -2,20 +2,30 @@
 <template>
   <div>
     <transition name="marsk-fade">
-      <div class="marsk" v-show="toastConfig.isShow"></div>
+      <div v-show="toastConfig.isShow" class="marsk" />
     </transition>
     <transition name="slide-fade">
-      <div :class="['action-toast',toastConfig.center?'center':'']" v-show="toastConfig.isShow">
-        <p>{{toastConfig.message}}</p>
+      <div
+        v-show="toastConfig.isShow"
+        :class="['action-toast', toastConfig.center ? 'center' : '']"
+      >
+        <p>{{ toastConfig.message }}</p>
         <div class="button-group">
-          <el-button type="danger" size="mini" round @click.native.prevent="sure">确定</el-button>
+          <el-button
+            type="danger"
+            size="mini"
+            round
+            @click.native.prevent="sure"
+            >确定</el-button
+          >
           <el-button
             v-if="toastConfig.showCancel"
             type="info"
             size="mini"
             round
             @click.native.prevent="cancel"
-          >取消</el-button>
+            >取消</el-button
+          >
         </div>
       </div>
     </transition>
@@ -29,32 +39,32 @@ export default {
     toastConfig: {
       isShow: {
         type: Boolean,
-        default: () => false
+        default: () => false,
       },
       showCancel: {
         type: Boolean,
-        default: () => false
+        default: () => false,
       },
       center: {
         type: Boolean,
-        default: () => false
+        default: () => false,
       },
       message: {
         type: String,
-        default: () => ''
-      }
-    }
+        default: () => '',
+      },
+    },
   },
   methods: {
-    //点击确定
+    // 点击确定
     sure() {
       this.$emit('putToast', true)
     },
-    //点击取消
+    // 点击取消
     cancel() {
       this.$emit('putToast', false)
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -95,7 +105,9 @@ export default {
   line-height: 22px;
   color: $color_3;
   background: $color_f;
-  text-align: left;
+  text-align: justify;
+  word-break: break-all;
+  box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.04);
   .button-group {
     margin-top: 20px;
     @include flex(space-around);
@@ -124,4 +136,4 @@ export default {
   background: $color_e;
   border-color: $color_e;
 }
-</style>
+</style>

src/layout/index.vue

@@ -1,47 +1,54 @@
 /*layout模板*/
 <template>
   <div>
-    <div class="lbg_color1" :class="['header',fixedHeader?'fixed-header':'']">
-  
-           <router-link to="/home">
+    <div  class="lbg_color1" :class="['header',fixedHeader?'fixed-header':'']"  >
+          <router-link to="/home">
         <div class="logo">
         <el-image :src="logo" fit="cover" /> </div>
         <!-- <span class="title">CADWEB</span> -->
         </router-link> 
+
       <div
+        v-if="
+          $route.path !== '/login' &&
+          $route.path !== '/register' &&
+          $route.path !== '/forget' &&
+          $route.path !== '/protocol'
+        "
         class="nav"
-        v-if="$route.path!='/login/index' && $route.path!='/register/index' && $route.path!='/forget/index'&& $route.path!='/protocol/index'"
       >
         <el-menu
-         class="lbg_color1 font_color1" 
           mode="horizontal"
           :unique-opened="true"
-          text-color="#0470CC"
-          active-text-color="#333"      
+          text-color="#333"
+          active-text-color="#333"
+          background-color="background-color: rgba($color: #0158a8, $alpha: 0);"
           :default-active="activeMenu"
         >
-          <div class="headericon">
+         <div class="headericon">
             <ul>
               
-              <li ><el-tooltip class="item" effect="dark" content="任务" placement="bottom"><i class="el-icon-s-fold"></i>  </el-tooltip> </li> 
-              <li ><el-tooltip class="item" effect="dark" content="团队" placement="bottom"><i class="el-icon-s-custom"></i>  </el-tooltip></li>
-              <li  @click="dialogsystem=true"><i class="el-icon-s-tools"></i></li>
+              <li  class="text_color"><el-tooltip class="item" effect="dark" content="任务" placement="bottom"><i class="el-icon-s-fold"></i>  </el-tooltip> </li> 
+              <li class="text_color"><el-tooltip class="item" effect="dark" content="团队" placement="bottom"><i class="el-icon-s-custom"></i>  </el-tooltip></li>
+              <li class="text_color" @click="dialogsystem=true"><i class="el-icon-s-tools"></i></li>
 
-              <li>
+              <li class="text_color">
                 <span >  <i class="el-icon-question" style="padding:1px 0"></i>
                 <i style="font-size:12px;padding:5px 0" class="el-icon-arrow-down"></i>
-                  
                 </span>
                 </li>
             </ul>
             </div>
     
-          <el-menu-item index="/index/optics">
-            <router-link to="/index/optics">首页</router-link>
+          <el-menu-item index="/index/optics" >
+            <router-link to="/index/optics" ><span>首页</span></router-link>
           </el-menu-item>
-
-          <el-menu-item v-if="loginStatus">
-            <router-link to="/user/index/project">
+    
+          <el-menu-item      background-color="background-color: rgba($color: #0158a8, $alpha: 0.1);"
+            v-if="loginStatus"
+            :class="currentMenu == 'user' ? 'itemOn' : ''"
+          >
+            <router-link to="/userLayout">
               <div class="user">
                 <el-dropdown>
                   <div>
@@ -49,15 +56,16 @@
                     <i class="el-icon-arrow-down" />
                   </div>
                   <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
+                    <el-dropdown-item @click.native="logout"
+                      >退出登录</el-dropdown-item
+                    >
                   </el-dropdown-menu>
                 </el-dropdown>
               </div>
             </router-link>
           </el-menu-item>
-          <el-menu-item v-else> 
-    
-             <router-link to="/login/index">登录/注册</router-link>
+          <el-menu-item v-else style=" background:none;">
+            <p @click="toLogin" class="login text_color">登录/注册</p>
           </el-menu-item>
         </el-menu>
       </div>
@@ -70,17 +78,34 @@
     </section>
 
     <div
-      :class="['footer',fixedHeader?'fixed-footer':'',/^\/index([\/][\D]+)?$/.test($route.path)?'footer-index':/^\/login\/index$/.test($route.path)?'footer-login':'']"
+      :class="[
+        'footer',
+        fixedHeader ? 'fixed-footer' : '',
+        /^\/indexLayout([\/][\D]+)?$/.test($route.path)|| /^\/matchLayout([\/][\D]+)?$/.test($route.path)||/^\/topic([\/][\D]+)?$/.test($route.path)||
+        /^\/detailbzs1([\/][\D]+)?$/.test($route.path)|| /^\/detailbzs2([\/][\D]+)?$/.test($route.path)|| /^\/detailbzs3([\/][\D]+)?$/.test($route.path)|| /^\/detailbzs4([\/][\D]+)?$/.test($route.path)
+          ? 'footer-index'
+          : /^\/login\/index$/.test($route.path)
+          ? 'footer-login'
+          : '',
+      ]"
     >
-      <div>
-        西安前沿动力软件开发有限责任公司
-        <a
-          target="_blank"
-          href="http://www.beian.miit.gov.cn/"
-        >备案号：渝ICP备 17006571号-1</a>
-      </div>
+      <a href="https://www.xichain.com.cn/xichain/" target="_blank"
+        >Copyright ©2015-2018 西安前沿动力有限公司All Rights Reserved</a
+      >
+      <a href="http://www.beian.miit.gov.cn/" target="_blank"
+        >版权所有：西安前沿动力软件开发有限责任公司 陕ICP备13000621号</a
+      >
+
+      <!-- <img class="police" src="../assets/img/police.png" />
+      <a
+        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50010302003067"
+        target="_blank"
+        >渝公网安备 50010302003067号</a
+      > -->
+
+     <!-- <span v-show="xglogo">服务热线：023-63410620</span>  -->
     </div>
-      <el-dialog
+     <el-dialog
   :visible.sync="dialogsystem"
   title="系统设置"
   width="800px"
@@ -93,25 +118,52 @@
     <el-button @click="dialogsystem = false">清 除</el-button>
   </span>
 </el-dialog>
+    <Login :loginShow="loginShow" @putLogin="getLogin" />
+    <Register :registerShow="registerShow" @putRegister="getRegister" />
+    <Forget :forgetShow="forgetShow" @putForget="getForget" />
   </div>
 </template>
 
 <script>
+import { parseTime } from '@/utils/index'
 import { request } from '@/utils/request'
 import { resetRouter } from '@/router'
 import { mapGetters } from 'vuex'
 import { MenuItem } from './components'
+// import countTo from 'vue-count-to'
+// import logo from '@/assets/index/logo.png'
+// import qylogo from '@/assets/index/qylogo.png'
+// import count from '@/assets/index/count.png'
 import logo from '@/assets/hcfd_images/adilog.png'
+import Login from '@/components/Login'
+import Register from '@/components/Register'
+import Forget from '@/components/Forget'
 export default {
-  name: 'LayoutWeb',
+  name: 'Layout',
   components: {
-    MenuItem
+    MenuItem,
+   // countTo,
+    Login,
+    Register,
+    Forget,
   },
   data() {
     return {
-     logo: logo,
-      dialogsystem:false,
-        itemlist:[
+      zhucenum:false,
+       flag: false,
+      logo:logo,
+      yingyong:false,
+      runProject: 0,
+      totalProject: 0,
+      user: 0,
+      activeUser: 0,
+      redirect: undefined,
+    dialogsystem:false,
+      loginShow: false,
+      registerShow: false,
+      forgetShow: false,
+      currentMenu: '',
+          itemlist:[
      {
        id:0,name:"黑色",
      },
@@ -122,24 +174,51 @@ export default {
      num:0,
     }
   },
-  created() {
-    let path = this.$route.path
-    let Reg = ''
-    let reg1 = /^\/index([\/][\D]+)?$/ //首页正则
-    let reg2 = /^\/login\/index$/ //登录页正则
-      if(localStorage.getItem("num")==1){
-
+  watch: {
+    $route: {
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect
+        this.getCount() // 获取统计信息
+         //判断是否是前沿的logo;
+     
+        if(route.path=="/indexLayout/workbench"||route.path=="/indexLayout/home"||route.path=="/indexLayout/guanyuwe"){
+          this.flag=false;
+          this.yingyong=true;
+        }  else{
+          this.flag=true;
+          this.yingyong=true;
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted(){
+       if(localStorage.getItem("num")==1){
        document.getElementById('theme').href="/static/white.css"
     }else{
+      console.log(localStorage.getItem("num"))
                document.getElementById('theme').href="/static/black.css"
   
     }
   },
+  created() {
+   
+  },
+  // 父组件中返回要传给下级的数据
+  provide() {
+    return {
+      toLogin: this.toLogin,
+      getCount: this.getCount,
+    }
+  },
   computed: {
     fixedHeader() {
-      return this.$store.getters.fixedHeader
+      return this.$store.getters.fixedHeader  
+    },
+      lesseeId() {
+      return this.$store.getters.lesseeId  
     },
-    ...mapGetters(['name', 'loginStatus']),
+    ...mapGetters(['name', 'userType', 'loginStatus']),
     key() {
       return this.$route.path
     },
@@ -149,61 +228,137 @@ export default {
     activeMenu() {
       const route = this.$route
       const { meta, path } = route
+      let pathArr = path.split('/')
+      if (pathArr.length == 3 && pathArr[1] == 'userLayout') {
+        this.currentMenu = 'user'
+      } else if (
+        pathArr.length == 3 &&
+        pathArr[1] == 'indexLayout' &&
+        pathArr[2] == 'my-workbench'
+      ) {
+        this.currentMenu = pathArr[2]
+      } else {
+        this.currentMenu = ''
+      }
       // 如果设置了路径，侧边栏将突出显示您设置的路径
       if (meta.activeMenu) {
         return meta.activeMenu
       }
       return path
-    }
+    },
   },
   methods: {
+    routerclik(){
+      const path=this.$route.path
+         let id= sessionStorage.getItem("id",id);
+          let pretreatment= sessionStorage.getItem("pretreatment",pretreatment);
+          let solver=  sessionStorage.getItem("pretreatment",solver);
+             this.$router.replace({
+                path: '/indexLayout/workbench',
+              query: {id, pretreatment, solver },
+              })
+      //  if(path=="/indexLayout/design"){
+          
+      //  }else{
+      //      this.$router.replace({
+      //           path: '/indexLayout',
+      //         })
+      //  }
+    },
+    toLogin() {
+      this.loginShow = true
+      console.log(this.loginShow);
+    },
+    getLogin(data) {
+      this.loginShow = false
+      if (data) {
+        if (data.type == 'register') {
+          this.registerShow = true
+        } else if (data.type == 'forget') {
+          this.forgetShow = true
+        }
+      }
+    },
+    getRegister(data) {
+      this.registerShow = false
+      if (data && data.type == 'login') {
+        this.loginShow = true
+      }
+    },
+    getForget(data) {
+      this.forgetShow = false
+      if (data && data.type == 'login') {
+        this.loginShow = true
+      }
+    },
+
     quit() {
       this.$store.dispatch('user/changeState', {
         key: 'token',
-        value: ''
+        value: '',
       })
       this.$store.dispatch('user/changeState', {
         key: 'name',
-        value: ''
+        value: '',
       })
       this.$store.dispatch('user/changeState', {
         key: 'userId',
-        value: ''
+        value: '',
+      })
+        this.$store.dispatch('user/changeState', {
+        key: 'userRole',
+        value: '',
+      })
+      this.$store.dispatch('user/changeState', {
+        key: 'cfdUrl',
+        value: '',
       })
       this.$store.dispatch('user/changeState', {
         key: 'loginStatus',
-        value: false
+        value: false,
       })
-      resetRouter() // 重置路由
+      resetRouter()
       this.$message.success('退出成功!')
       setTimeout(() => {
-        this.$router.replace(`/login/index?redirect=${this.$route.fullPath}`)
+        // this.$router.replace(`/login?redirect=${this.$route.fullPath}`)
+        this.$router.replace(`/indexLayout/workbench`)
       }, 1000)
     },
     logout() {
       this.$confirm('此操作将退出登录, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning'
+        center: true,
+        type: 'warning',
       })
         .then(() => {
-          let params = { transCode: 'A00004' }
-          request(params)
+          request({ transCode: 'A00004' })
             .then(() => {
               this.quit()
             })
-            .catch(err => {
+            .catch((err) => {
               this.quit()
             })
         })
         .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消'
-          })
+          this.$message.info('已取消')
         })
     },
-    //  主题替换
+    getCount() {
+      this.runProject = 0
+      this.totalProject = 0
+      this.user = 0
+      this.activeUser = 0
+      request({ transCode: 'C00005' })
+        .then((res) => {
+          this.runProject = parseInt(res.runProject)
+          this.totalProject = parseInt(res.totalProject)
+          this.user = parseInt(res.user)
+          this.activeUser = parseInt(res.activeUser)
+        })
+        .catch((err) => {})
+    },
+       //  主题替换
   clicksel(index){
       if(index==0){
         this.num=0;
@@ -218,29 +373,7 @@ export default {
 
       }
     },
-    login(){
-        //进入工作台
-    
-      let loginStatus = this.$store.getters.loginStatus
-      if (loginStatus) {
-        this.$message.success('恭喜你，成功进入工作台！')
-        this.$router.push('/MPM/MPM')
-      } else {
-        this.$confirm('你还未登录，请登录后再操作, 是否登录?', '提示', {
-          confirmButtonText: '登录',
-          cancelButtonText: '取消',
-          type: 'warning'
-        })
-          .then(() => {
-            this.$router.replace('/login/index')
-          })
-          .catch(() => {
-            this.$message.info('已取消！')
-          })
-      }
-
-    },
-  }
+  },
 }
 </script>
 
@@ -251,43 +384,81 @@ export default {
 
 .fixed {
   &-header {
-    @include position(fixed, 0, auto, 0, 0, 9);
+    // @include position(fixed, 0, auto, 0, 0, 9);
     @include w_h();
-
-   -moz-box-shadow: 2px 6px 11px #909090;
-
-   -webkit-box-shadow:2px 6px 11px #666;
-
-   box-shadow:2px 6px 11px #666;
   }
   &-footer {
     // @include position(fixed, auto, 0, 0, 0, 9);
     @include w_h();
   }
 }
+.fixed-footer{
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9;
+    width: 100%;
+    height: auto;
+}
+.show{
+     background: $color_f;
 
+}
+.hidden{
+
+}
 .header {
-  padding: 0 20px;
+ padding: 0 20px;
   @include flex();
   @include w_h(100%, 40px);
   min-width: 1000px;
 //background: $color_f;
   box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.04);
-      // background-color:#757070;
   .logo {
     @include w_h(100px);
-   .el-image{
-          margin-top: 5px;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .count {
+    @include flex(flex-start);
+    @include w_h(auto, 35px);
+    padding: 0 $pad;
+    font-size: 12px;
+    color: $color_3;
+    .item {
+      margin: 0 20px;
+    }
+    .icon {
+      @include w_h(14px);
+      margin-right: 3px;
+      vertical-align: bottom;
+    }
+    span {
+      span {
+        color: $color_on;
+      }
     }
   }
 
   .nav {
     @include flex();
     height: 100%;
-    font-size: 14px;
+    font-size: 12px;
     .el-menu {
       height: 100%;
       border: none;
+      background:none;
+      color: #0470cc;
+      .itemOn {
+        // color: $color_on !important;
+        // border-bottom: 2px solid $color_on !important;
+         color: rgba($color: #0158a8, $alpha: 1)!important;
+          border-bottom: 2px solid  #0158a8!important;
+      }
     }
     .user {
       color: inherit;
@@ -298,6 +469,9 @@ export default {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
+      }
+       &:hover span {
+        color: #f66420;
       }
       .el-icon-arrow-down {
         font-size: 12px;
@@ -305,56 +479,73 @@ export default {
     }
   }
 }
-
 .app-main {
-  padding: 0;
-  width: 100%;
-  height: calc(100vh - 30px);
-  min-height: 580px;
-}
-.fixed-header + .app-main {
-  padding: 40px 0 0;
+    width: 100%;
+    height: calc(100vh - 85px);
 }
-
 .footer {
-  @include w_h(100%, 30px);
-  line-height: 30px;
+  @include w_h(100%, 35px);
+  line-height: 35px;
   font-size: 12px;
   text-align: center;
-  color: #737374;
-  background: $color_f5;
+  color: #747474;
+  background: $color_f2;
+  .police {
+    vertical-align: sub;
+  }
+  a {
+    padding-right: 10px;
+  }
   a:hover {
     color: $color_9;
   }
-
+  &-login {
+    background: $color_f;
+  }
   &-index {
-    background: #03000b;
+    background: #2b2828;
   }
 }
-.el-menu-item a{
-  color: #fff
-}
 </style>
 
 <style lang="scss">
 @import '@/styles/variables.scss';
+.el-image__inner--center {
+  left: 0 !important;
+  transform: translate(0) !important;
+}
 .nav {
   .el-dropdown {
     color: inherit;
   }
   .el-menu-item,
-  .el-submenu__title {
+  .el-submenu__title,
+  .el-menu--horizontal > .el-menu-item {
     height: 40px;
     line-height: 40px;
     color: $color_3;
-    &:hover{
-   background-color: rgba($color: #fff, $alpha: 0.3);
+    border: none;
+    padding: 0 5px;
+    margin: 0 15px;
+    background-color: rgba($color: #0158a8, $alpha: 0)!important;;
+    a {
+      display: block;
+    }
+    &.is-active {
+      border: none;
     }
   }
-
-  .el-menu--horizontal > .el-menu-item a {
-    display: block;
+}
+.dasai{
+  
+  .yingyong{
+    font-size: 14px;
+    color: #303133;
   }
+     &:hover .yingyong{
+        color: #f66420 !important;
+      }
+  
 }
 .headericon{
   ul{
@@ -375,6 +566,15 @@ export default {
 }
 .title{
   font-size: 24px;
-  color: #fff;
+}
+.login{
+  padding:0;
+  margin: 0;
+}
+</style>
+<style>
+p{
+  padding: 0;
+  margin: 0;
 }
 </style>

src/permission.js

@@ -8,7 +8,7 @@ import { Caegw_LogUrl } from '@/settings' // 引入settings.js
 
 NProgress.configure({ showSpinner: false }) // NProgress配置
 
-const whiteList = ['/fail404', '/home','/sso','/home/myproject','/home/openproject','/index','/login/index']// 免登录的白名单
+const whiteList = ['/fail404', '/home','/sso','/home/myproject','/home/openproject','/index','/login/index','/register/index', '/forget/index', '/protocol/index','/indexLayout/index']// 免登录的'白名单
 // 前置路由守卫
 router.beforeEach(async (to, from, next) => {
   NProgress.start() // 开启进度条

src/router/index.js

@@ -68,6 +68,18 @@ export const constantRoutes = [
       }]
     
     },
+    {
+      path: '/indexLayout/index',
+      component: Layout,
+      children:[{
+        path: '/index',
+        name: 'index',
+        component: () => import('@/views/indexLayout/index'),
+        meta: { title: '项目新建', icon: '' },
+        hidden: true,
+      }]
+    
+    },
   // 登陆
   {
     path: '/login',
@@ -128,8 +140,8 @@ export const constantRoutes = [
   // 404页必须放在末尾 !!!
   {
     path: '*',
-    redirect: '/home',
-    component: () => import('@/views/home/index'),
+    redirect: '/indexLayout/index',
+    component: () => import('@/views/indexLayout/index'),
     hidden: true
   }
 ]

src/utils/validate.js

@@ -2,30 +2,46 @@
  * @param {string} path
  * @returns {Boolean}
  */
-export function isExternal(path) {
+ export function isExternal(path) {
   return /^(https?:|mailto:|tel:)/.test(path)
 }
 
 /**
- * @param {string} email
- * @returns {Boolean}
- */
+* @param {string} email
+* @returns {Boolean}
+*/
 export function validEmail(email) {
-  return /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email)
+  return /^([a-zA-Z0-9])(\w|\-|\.)+@([a-zA-Z0-9]+[-.])+([a-zA-Z]{2,4})$/.test(email)
 }
 
 /**
- * @param {string} code
- * @returns {Boolean}
- */
+* @param {string} mobile
+* @returns {Boolean}
+*/
+export function validMobile(mobile) {
+  return /^1[3456789]\d{9}$/.test(mobile)
+}
+
+/**
+* @param {string} code
+* @returns {Boolean}
+*/
 export function validCode(code) {
   return /^[0-9]{6}$/.test(code)
 }
 
 /**
- * @param {string} pwd
- * @returns {Boolean}
- */
-export function validPwd(pwd) {
-  return /^[a-zA-Z]\w{5,7}$/.test(pwd)
+* @param {string} name
+* @returns {Boolean}
+*/
+export function validName(name) {
+  return !/[\@]|\s/g.test(name)
 }
+
+/**
+* @param {string} pwd
+* @returns {Boolean}
+*/
+export function validPwd(pwd) {
+  return /^[\w]{6,18}$/.test(pwd)
+}

src/views/indexLayout/index.vue

@@ -0,0 +1,535 @@
+/*workbench*/
+<template>
+  <div class="workbench">
+    <div class="tab" v-show="tab">
+      <div
+        :class="[
+          'tab-list',
+          'tab-before',
+          currentPage === 'pretreatment' ? 'tab-on' : '',
+        ]"
+        @click="selectTab('pretreatment')"
+      >
+        前处理
+      </div>
+      <div class="logo">
+        <img
+          :src="dataList[0] ? getImage(dataList[0].platformTitlePicId) : ''"
+        />
+      </div>
+      <div
+        :class="[
+          'tab-list',
+          'tab-after',
+          currentPage === 'solver' ? 'tab-on' : '',
+        ]"
+        @click="selectTab('solver')"
+      >
+        求解器
+      </div>
+    </div>
+    <!-- <div class="container" v-if="currentPage === 'pretreatment'">
+      <h3>前处理</h3>
+      <div class="content">敬请期待！</div>
+    </div>
+    <div class="container" v-if="currentPage === 'solver'"> -->
+    <div class="container">
+      <div class="solver">
+        <div
+          :class="[
+            'solver-list',
+            dataList[0].preprocessDisplayStyle == 2 ||
+            dataList[0].cfdDisplayStyle == 2
+              ? 'full'
+              : '',
+          ]"
+          v-for="(list, index) in dataList[0] ? dataList[0].kindRows : []"
+          :key="index"
+        >
+          <el-image
+            v-if="list.kindId"
+            :src="getImage(list.kindId)"
+            :fit="fit"
+          ></el-image>
+          <!-- <img v-if="list.kindId" :src="getImage(list.kindId)" /> -->
+          <!-- <img
+            v-else-if="
+              dataList[0].preprocessDisplayStyle == 2 ||
+              dataList[0].cfdDisplayStyle == 2
+            "
+            src="../../../assets/sourceFile/starry-sky.png"
+          />
+          <img
+            v-else
+            src="../../../assets/sourceFile/workbench/physics-bg.png"
+          /> -->
+          <div class="mask">
+            <div class="desc">
+              <div class="icon-outer">
+                <div class="icon-inner">
+                  <div class="img" v-if="list.kindPicIconId">
+                    <img :src="getImage(list.kindPicIconId)" />
+                  </div>
+                  <svg-icon v-else icon-class="acoustics" />
+                </div>
+              </div>
+              <span>{{ list.kindName }}</span>
+            </div>
+          </div>
+          <div class="drawer">
+            <div class="title">
+              <span>{{ list.kindName }}</span>
+              <div class="img" v-if="list.kindPicIconId">
+                <img :src="getImage(list.kindPicIconId)" />
+              </div>
+              <svg-icon v-else icon-class="acoustics" />
+            </div>
+            <div class="case">
+              <div
+                class="case-list"
+                :class="[{'colordisplay':item.state=='2'},'nav4']" 
+                v-for="(item, index) in list.cfdRows"
+                :key="index"
+                @click="toCase(item.name, item.state, item.number)"
+              >
+                <p>{{ item.name }}</p>
+                <span>{{ item.remark }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+
+</template>
+
+<script>
+import { request, getImage } from '@/utils/request'
+import { lesseeId} from '@/settings'
+export default {
+  name: 'Cae',
+  components: {},
+  data() {
+    return {
+      currentPage: 'solver',
+      platformIds: '',
+      pretreatment: '',
+      solver: '',
+      dataList: [],
+      fit: 'fill',
+      tab:false,
+      displaystyle:false,
+    }
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+       if (route.query && route.query.type == 'reLogin') {
+          this.toLogin()
+        }
+      },
+      immediate: true,
+    },
+  },
+    inject: ['toLogin'],
+  created() {
+
+  },
+  beforeDestroy() {
+    this.$store.dispatch('user/changeState', {
+      key: 'workbench',
+      value: '',
+    })
+  },
+  mounted(){
+this.jiazai();
+  },
+  methods: {
+    // 获取id
+  jiazai(){
+        const params = {
+          transCode: 'C00038',
+        }
+        request(params)
+          .then((res) => {;
+            let id=res.rows[0].platformId;
+            let pretreatment=res.rows[0].preprocessDisplayStyle;
+            let solver=res.rows[0].cfdDisplayStyle;
+          this.platformIds = id;
+           this.pretreatment =pretreatment;
+           this.solver =solver;
+           this.currentPage = solver != 0 ? 'solver' : 'pretreatment';
+           this.getData();
+          })
+          .catch((err) => {})
+  },
+       // 切换tab
+  
+    selectTab(index) {
+      if (
+        (index == 'pretreatment' && this.pretreatment == 0) ||
+        (index == 'solver' && this.solver == 0)
+      )
+        return
+      this.currentPage = index
+      this.getData()
+    },
+    getImage(id) {
+      return getImage(id)
+    },
+    getData() {
+      const params = {
+        transCode: 'C00035',
+        platformIds: this.platformIds,
+        cfdType:
+          this.currentPage == 'solver'
+            ? '2'
+            : this.currentPage == 'pretreatment'
+            ? '1'
+            : '', //(1:前处理，2：求解器)
+      }
+      request(params)
+        .then((res) => {
+          this.dataList = res.platformRows
+          this.$store.dispatch('user/changeState', {
+            key: 'workbench',
+            value: res.platformRows[0].platformNumber,
+          })
+        })
+        .catch((err) => {})
+    },
+    toCase(name, state, projectType) {
+      let loginStatus = this.$store.getters.loginStatus
+      let userType = this.$store.getters.userType
+      if (loginStatus) {
+        if (state == 1) {
+          if (userType == 1)
+            return this.$message.warning('只有子账户或个人账户才能进入！')
+          const params = {
+            transCode: 'A00006',
+          }
+          request(params)
+            .then((res) => {
+              this.$message.success(' 即将进入' + name)
+               let lesseeId=this.$store.getters.lesseeId;
+              setTimeout(() => {
+                window.open(
+                  this.$store.getters.cfdUrl +
+                    '?authCode=' +
+                    res.authCode +
+                    '&projectType=' +
+                    projectType+
+                     '&lesseeId=' +
+                    lesseeId,
+                  '_blank'
+                )
+              }, 1000)
+            })
+            .catch((err) => {})
+        } else {
+          this.colordisplay=true;
+          return this.$message.info(name + ' 正在开发中...')
+        }
+      } else {
+        this.$confirm('你还未登录，请登录后再操作, 是否登录?', '提示', {
+          confirmButtonText: '登录',
+          cancelButtonText: '取消',
+          center: true,
+          closeOnClickModal: false,
+          type: 'warning',
+        })
+          .then(() => {
+            this.$router.replace(`/indexLayout/home?type=reLogin`)
+          })
+          .catch(() => {
+            this.$message.info('已取消！')
+          })
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.workbench {
+  // @include w_h(100%, 100%);
+  @include w_h(100%);
+  font-size: 12px;
+  color: $color_b;
+  padding: 0 $pad;
+  background: #181818;
+  overflow: hidden;
+  .tab {
+    @include flex(space-between, flex-start);
+    overflow: hidden;
+    &-before {
+      position: relative;
+      background: linear-gradient(92deg, #181818 0%, #464646 68%);
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0px;
+        right: -40px;
+        z-index: 0;
+        @include w_h(40px, 40px);
+        background: #464646;
+      }
+    }
+    &-after {
+      position: relative;
+      background: linear-gradient(92deg, #454545 33%, #181818 100%);
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0px;
+        left: -40px;
+        z-index: 0;
+        @include w_h(40px, 40px);
+        background: #464646;
+      }
+    }
+    &-list {
+      @include w_h(45%, 40px);
+      line-height: 40px;
+      text-align: center;
+
+      &:hover {
+        cursor: pointer;
+        color: $color_on;
+        border-bottom: 1px solid $color_on;
+      }
+    }
+    &-on {
+      color: $color_on;
+      border-bottom: 1px solid $color_on;
+    }
+    .logo {
+      @include w_h(240px, 60px);
+      @include flex(center);
+      padding: 10px;
+      position: relative;
+      z-index: 1;
+      background: linear-gradient(0deg, #575757 0%, #181818 100%);
+      box-shadow: 1px 4px 33px 6px rgba(0, 0, 0, 0.28);
+      -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
+      clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
+      font-size: 14px;
+      color: $color_f;
+      img {
+        @include w_h(auto, 100%);
+      }
+    }
+  }
+  .container {
+    // @include w_h(100%, calc(100% - 60px));
+    @include w_h(100%);
+    min-height: 378px;
+    max-height: 720px;
+    padding: 21px 0 12px;
+    h3 {
+      font-size: 18px;
+      line-height: 40px;
+    }
+    .content {
+      margin-top: 150px;
+      @include w_h(100%, 408px);
+      font-size: 60px;
+      text-align: center;
+    }
+    .solver {
+      @include w_h(100%,100%);
+      @include flex(flex-start);
+      &-list {
+        // @include w_h(13.8%, 92%);
+        min-width: 127px;
+        min-height: 300px;
+        margin: 26px 5px;
+        @include w_h(13.8%);
+        position: relative;
+        img {
+          @include w_h(100%, 100%);
+        }
+        .mask {
+          @include position(absolute, 0, 0, 0, 0, 1);
+          @include flex(center);
+          background: rgba(0, 0, 0, 0.5);
+          opacity: 1;
+          transition: all 0.8s;
+          .desc {
+            font-size: 12px;
+            color: $color_f;
+            text-align: center;
+            .icon-outer {
+              margin: 10px auto;
+              @include w_h(46px, 46px);
+              @include flex(center);
+              background: linear-gradient(180deg, #6fc8f2 0%, #005277 100%);
+              border-radius: 50%;
+            }
+            .icon-inner {
+              @include w_h(38px, 38px);
+              @include flex(center);
+              font-size: 16px;
+              background: linear-gradient(180deg, #56c0f1 0%, #00a0e9 100%);
+              box-shadow: 0 0 5px 0 #6fc8f2;
+              border-radius: 50%;
+              .img {
+                @include w_h(16px, 16px);
+                img {
+                  @include w_h();
+                }
+              }
+            }
+          }
+        }
+        .drawer {
+          @include position(absolute, auto, 0, 0, 0, 1);
+          @include w_h();
+          max-height: 100%;
+          color: $color_f;
+          opacity: 0;
+          transition: all 0.8s;
+          overflow: auto;
+          .title {
+            @include w_h(100%, 40px);
+            @include flex();
+            padding: 0 15px;
+            font-size: 16px;
+            background: $color_on;
+            .img {
+              @include w_h(16px, 16px);
+              img {
+                @include w_h();
+              }
+            }
+          }
+          .case {
+            @include w_h();
+            max-height: calc(100% - 40px);
+            overflow-y: auto;
+            overflow-x: hidden;
+            &-list {
+              padding: 8px 15px;
+              font-size: 12px;
+              background: rgba(246, 100, 31, 0.8);
+              transition: all 0.8s;
+              p {
+                font-size: 14px;
+                margin-bottom: 5px;
+              }
+              span {
+                line-height: 16px;
+              }
+              &:hover {
+                cursor: pointer;
+                color: $color_3;
+                background: rgba(255, 255, 255, 0.8);
+              }
+            }
+            .colordisplay{
+                &:hover{
+                    cursor: pointer;
+                    color:rgba($color: #333333, $alpha: 0.4); 
+                   }
+            
+            }
+          }
+        }
+        &:hover .mask {
+          opacity: 0;
+        }
+        &:hover .drawer {
+          opacity: 1;
+        }
+      }
+      .full {
+        @include w_h(100%, 100%);
+        @include flex(center);
+      }
+    }
+  }
+}
+.colordisplay{
+color: rgba($color: #ffffff, $alpha: 0.4);
+} 
+
+.index {
+  .container {
+    @include w_h();
+  }
+  .footer {
+    @include w_h(100%);
+    position: relative;
+    padding: 6px;
+    background: #222020;
+    overflow: hidden;
+    .tab {
+      @include w_h();
+      @include flex(flex-start);
+      position: relative;
+      z-index: 1;
+      .tab-list {
+        @include w_h(28.2%);
+        margin-right: 5px;
+        transition: all 0.3s;
+        &:hover {
+          cursor: pointer;
+          transform: translateY(-5px);
+        }
+        img {
+          @include w_h();
+        }
+      }
+    }
+    .info {
+      @include position(absolute, auto, 0, auto, 0, 0);
+      height: calc(100% - 20px);
+      .background {
+        @include w_h(auto, 100%);
+      }
+      .image {
+        @include position(absolute, 25%, auto, auto, 5%, 0);
+        @include w_h(45%);
+      }
+    }
+  }
+}
+.title {
+  @include flex();
+  font-size: 18px;
+  font-weight: 700;
+  color: $color_3;
+  .operation {
+    font-size: 24px;
+    color: $color_6;
+    transition: all 0.3s;
+    &:hover {
+      cursor: pointer;
+      color: $color_3;
+    }
+  }
+}
+.content {
+  padding: 15px 5px;
+  max-height: 300px;
+  overflow: auto;
+  p {
+    padding: 5px 0;
+    font-size: 16px;
+    color: $color_3;
+    font-weight: 600;
+    transition: all 0.3s;
+    &.on {
+      color: $color_on;
+    }
+    &:hover {
+      color: $color_on;
+      cursor: pointer;
+    }
+  }
+}
+</style>

vue.config.js

@@ -25,8 +25,9 @@ module.exports = {
     disableHostCheck: true,
     proxy: {
       '/api': {
+        target:'http://192.168.0.43:8087/TransServlet',
       //  target: 'http://localhost:8081/', // 后端接口地址
-          target: 'http://192.168.0.43:8081/',
+        //  target: 'http://192.168.0.43:8081/',
         // target: 'http://192.168.0.43:8181/',
         // target: 'https://www.gzchain.org.cn/managersvc/', //后端接口地址
         secure: false, //接受使用https