11

董国庆

2026-01-30 b4c24129dbad8d2e4f329320a002a98edda572bf

11

 screen/src/view/login/index.vue

@@ -2,11 +2,7 @@
  <div class="content">
    <div class="title">智慧工程安全监管平台</div>
    <div v-if="showLoginBox" class="form">
      <img
        src="../../assets/img/login/bgTop.png"
        style="width: 371px"
        class="h--17 mt--20"
      />
      <img src="../../assets/img/login/bgTop.png" style="width: 371px" class="h--17 mt--20" />
      <div class="titleTxt">
        <div>欢</div>
        <div>迎</div>
@@ -15,121 +11,60 @@
      </div>
      <div class="mt--64 w100 px--65">
        <div class="flex a-center py--18 pl--25 pr--74 br--16 bgcolor1">
          <img
            src="../../assets/img/login/account.png"
            class="w--29 h--29 shrink0"
          />
          <input
            v-model="form.account"
            placeholder="请输入账号"
            class="h--23 ml--20 flex1"
          />
          <img src="../../assets/img/login/account.png" class="w--29 h--29 shrink0" />
          <input v-model="form.account" placeholder="请输入账号" class="h--23 ml--20 flex1" />
        </div>
        <div class="flex a-center py--18 px--25 br--16 mt--40 bgcolor1">
          <img
            src="../../assets/img/login/password.png"
            class="w--29 h--29 shrink0"
          />
          <input
            :type="showPassword ? 'text' : 'password'"
            v-model="form.password"
            placeholder="请输入密码"
            class="h--23 ml--20 flex1"
          />
          <div
            class="w--29 h--29 flex a-center j-center cursor-pointer ml--20"
            @click="togglePassword"
          >
            <img
              v-if="showPassword"
              src="../../assets/img/login/eye-open.png"
              class="w--22 h--15 shrink0"
            />
            <img
              v-if="!showPassword"
              src="../../assets/img/login/eye-close.png"
              class="w--22 h--9 shrink0"
            />
          <img src="../../assets/img/login/password.png" class="w--29 h--29 shrink0" />
          <input :type="showPassword ? 'text' : 'password'" v-model="form.password" placeholder="请输入密码"
            class="h--23 ml--20 flex1" />
          <div class="w--29 h--29 flex a-center j-center cursor-pointer ml--20" @click="togglePassword">
            <img v-if="showPassword" src="../../assets/img/login/eye-open.png" class="w--22 h--15 shrink0" />
            <img v-if="!showPassword" src="../../assets/img/login/eye-close.png" class="w--22 h--9 shrink0" />
          </div>
        </div>
        <div class="flex a-center py--13 px--25 br--16 mt--40 bgcolor1">
          <img
            src="../../assets/img/login/code.png"
            class="w--29 h--29 shrink0"
          />
          <input
            v-model="form.captcha"
            placeholder="请输入验证码"
            class="h--23 ml--20 flex1"
          />
          <div
            class="w--95 h--38 br--4 cursor-pointer relative overflow-hidden"
            style="background-color: #fff"
            @click="onCaptchaClick"
          >
          <img src="../../assets/img/login/code.png" class="w--29 h--29 shrink0" />
          <input v-model="form.captcha" placeholder="请输入验证码" class="h--23 ml--20 flex1" />
          <div class="w--95 h--38 br--4 cursor-pointer relative overflow-hidden" style="background-color: #fff"
            @click="onCaptchaClick">
            <svg class="absolute inset-0 w-full h-full">
              <!-- 波浪线 -->
              <g stroke="#999" stroke-width="1" fill="none" opacity="0.2">
                <path
                  v-for="(wave, index) in noiseData.waves"
                  :key="'wave-' + index"
                  :d="`M 0 ${wave.y} Q 24 ${wave.y - wave.amplitude} 48 ${
                    wave.y
                  } T 96 ${wave.y}`"
                />
                <path v-for="(wave, index) in noiseData.waves" :key="'wave-' + index" :d="`M 0 ${wave.y} Q 24 ${wave.y - wave.amplitude} 48 ${wave.y
                  } T 96 ${wave.y}`" />
              </g>
              <!-- 干扰线 -->
              <g stroke="#666" stroke-width="0.5" opacity="0.3">
                <line
                  v-for="(line, index) in noiseData.lines"
                  :key="'line-' + index"
                  :x1="line.x1"
                  :y1="line.y1"
                  :x2="line.x2"
                  :y2="line.y2"
                />
                <line v-for="(line, index) in noiseData.lines" :key="'line-' + index" :x1="line.x1" :y1="line.y1"
                  :x2="line.x2" :y2="line.y2" />
              </g>
              <!-- 噪点 -->
              <g fill="#999" opacity="0.4">
                <circle
                  v-for="(dot, index) in noiseData.dots"
                  :key="'dot-' + index"
                  :cx="dot.x"
                  :cy="dot.y"
                  :r="dot.size"
                />
                <circle v-for="(dot, index) in noiseData.dots" :key="'dot-' + index" :cx="dot.x" :cy="dot.y"
                  :r="dot.size" />
              </g>
            </svg>
            <div
              class="relative z-10 flex items-center justify-center h-full"
              style="
            <div class="relative z-10 flex items-center justify-center h-full" style="
                font-family: monospace;
                font-size: 24px;
                letter-spacing: 4px;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
              "
            >
              <span
                v-for="(char, index) in captchaText"
                :key="index"
                class="inline-block"
                :style="{
                  color: noiseData.charStyles[index]
                    ? noiseData.charStyles[index].color
                    : '#333',
                  transform: `rotate(${
                    noiseData.charStyles[index]
                      ? noiseData.charStyles[index].rotation
                      : 0
                  }deg) translateY(${
                    noiseData.charStyles[index]
                      ? noiseData.charStyles[index].offsetY
                      : 0
              ">
              <span v-for="(char, index) in captchaText" :key="index" class="inline-block" :style="{
                color: noiseData.charStyles[index]
                  ? noiseData.charStyles[index].color
                  : '#333',
                transform: `rotate(${noiseData.charStyles[index]
                    ? noiseData.charStyles[index].rotation
                    : 0
                  }deg) translateY(${noiseData.charStyles[index]
                    ? noiseData.charStyles[index].offsetY
                    : 0
                  }px)`,
                  display: 'inline-block',
                  margin: '0 2px',
                }"
              >
                display: 'inline-block',
                margin: '0 2px',
              }">
                {{ char }}
              </span>
            </div>
@@ -143,37 +78,19 @@
    <div v-else class="selectAcount">
      <div class="tipTitle">请选择登录账号</div>
      <div class="w100 mt--56 px--50 oa">
        <div
          v-for="item in accountList"
          :key="item.id"
        <div v-for="item in accountList" :key="item.id"
          class="flex a-center j-between py--23 px--20 border1 cursor-pointer mb--34"
          :class="{ 'active-item': selectedAccount === item.id }"
          @click="selectAccount(item)"
        >
          :class="{ 'active-item': selectedAccount === item.id }" @click="selectAccount(item)">
          <div class="fs--16 lh--16 c-fff">{{ item.name }}</div>
          <img
            v-if="selectedAccount === item.id"
            src="../../assets/img/login/active.png"
            class="w--24 h--24 shrink0"
          />
          <img
            v-else
            src="../../assets/img/login/noActive.png"
            class="w--24 h--24 shrink0"
          />
          <img v-if="selectedAccount === item.id" src="../../assets/img/login/active.png" class="w--24 h--24 shrink0" />
          <img v-else src="../../assets/img/login/noActive.png" class="w--24 h--24 shrink0" />
        </div>
      </div>
      <div class="flex a-center j-center c-fff mt--64 gap--30 fs--16 pb--51">
        <div
          class="px--59 lh--40 br--4 bgcolor2 cursor-pointer"
          @click="cancelSelect"
        >
        <div class="px--59 lh--40 br--4 bgcolor2 cursor-pointer" @click="cancelSelect">
          取消
        </div>
        <div
          class="px--59 lh--40 br--4 bgcolor3 cursor-pointer"
          @click="confirmSelect"
        >
        <div class="px--59 lh--40 br--4 bgcolor3 cursor-pointer" @click="confirmSelect">
          确定
        </div>
      </div>
@@ -213,7 +130,7 @@
  created() {
    this.generateCaptcha();
  },
  mounted() {},
  mounted() { },
  methods: {
    // 生成验证码
    generateCaptcha() {
@@ -373,6 +290,9 @@
                      localStorage.setItem("clientName", r.name);
                      localStorage.setItem("clientLogo", r.logo);
                      localStorage.setItem("clientId", re[0].id);
                      localStorage.setItem("bigHiddenDanger", r.bigHiddenDanger); //1开启 2关闭 重大隐患
                      localStorage.setItem("generalHiddenDanger", r.generalHiddenDanger);//1开启 2关闭 一般隐患
                      localStorage.setItem("commentType", r.commentType); //1模糊评价 2打分评价
                      this.$router.replace({
                        path: "/home",
                      });
@@ -518,11 +438,9 @@
      gap: 20px;

      div {
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.6) 1px,
          #ffffff 100%
        );
        background: linear-gradient(to right,
            rgba(255, 255, 255, 0.6) 1px,
            #ffffff 100%);
        -webkit-background-clip: text;
        /* 使用-webkit-前缀兼容部分浏览器 */
        background-clip: text;