yby

src/views/enterprise/login/loginPage.vue

@@ -1,11 +1,170 @@
-<script setup>
+<template>
+  <div class="page">
+    <div class="content" align="center">
+      <p style="margin-top: 6%;display: inline-block;width: auto;height: 60px;font-family: PingFangSC, PingFang SC;font-weight: 500;font-size: 36px;color: #333333;
+      font-style: normal;margin-left:-10%;padding: 0" >
+        登录农业试验评价系统
+      </p>
+      <span style="font-size: 15px; display: inline-block; margin-left: 5px">(企业专属)</span>
+      <div style="margin-top: 10px; display: flex; justify-content: space-between; width: 80%">
+        <el-menu mode="horizontal" @select="handleSelect">
+          <el-menu-item index="1" style="font-size: 22px; font-family: PingFangSC, PingFang SC;">验证码登录</el-menu-item>
+          <el-menu-item index="2" style="font-size: 22px; font-family: PingFangSC, PingFang SC;">密码登录</el-menu-item>
+          <el-menu-item index="3" style="font-size: 22px; font-family: PingFangSC, PingFang SC;">二维码登录</el-menu-item>
+        </el-menu>
+      </div>
+      <div v-if="activeTab === '1'">
+        <!-- 验证码登录内容 -->
+        <div style="border-bottom: 1px solid black; width: 80%; margin-top: 2%">
+          <input style="border: none; width: 100%; height: 30px; font-size: 15px; outline: none" name="phone" type="text" placeholder="请输入注册手机号">
+        </div>
+        <div style="border-bottom: 1px solid black; width: 80%; margin-top: 5%">
+          <input style="border: none; width: 80%; height: 30px; font-size: 15px; outline: none" name="text" type="text" placeholder="请输入 6 位验证码">
+          <el-button type="text" style="width: 20%; height: 30px; padding-left: 40px; color: #b3b3b3">获取验证码</el-button>
+        </div>
+        <div align="left" style="margin-left: 10%; margin-top: 4%">
+          <el-checkbox v-model="checked" style="">我已阅读并同意蚯蚓农服 <a href="" style="color: #00afff">许可协议</a> 和 <a href="" style="color: #00afff">隐私政策</a></el-checkbox>
+        </div>
+        <el-button class="gradient-button">立即登录</el-button>
+        <div style="margin-top: 10px; display: flex; justify-content: space-between; width: 80%">
+          <a href="" style="color: #00afff">注册账号</a>
+        </div>
+      </div>
+      <div v-if="activeTab === '2'">
+        <!-- 密码登录内容 -->
+        <div style="border-bottom: 1px solid black; width: 80%; margin-top: 2%">
+          <input style="border: none; width: 100%; height: 30px; font-size: 15px; outline: none" name="phone" type="text" placeholder="请输入注册手机号">
+        </div>
+        <div style="border-bottom: 1px solid black; width: 80%; margin-top: 5%">
+          <input
+            :type="showPassword? 'text' : 'password'"
+            style="border: none; width: 96%; height: 30px; font-size: 15px; outline: none"
+            name="password"
+            placeholder="输入密码"
+          />
+          <img
+            :src="showPassword? visibleImagePath : hiddenImagePath"
+            style="font-size: 20px; cursor: pointer; width: 20px; height: 20px"
+            @click="togglePasswordVisibility"
+          />
+        </div>
+        <div align="left" style="margin-left: 10%; margin-top: 4%">
+          <el-checkbox v-model="checked" style="">我已阅读并同意蚯蚓农服 <a href="" style="color: #00afff">许可协议</a> 和 <a href="" style="color: #00afff">隐私政策</a></el-checkbox>
+        </div>
+        <el-button class="gradient-button">立即登录</el-button>
+        <div style="margin-top: 10px; display: flex; justify-content: space-between; width: 80%">
+          <a href="" style="color: #00afff">注册账号</a>
+          <a href="" style="color: #00afff">忘记密码</a>
+        </div>
+      </div>
+      <div v-if="activeTab === '3'">
+        <!-- 二维码登录内容 -->
+        <img src="your_qr_code_image_path.jpg" alt="二维码" style="width: 100px; height: 100px; margin: 0 auto; display: block;">
+        <el-button class="gradient-button">立即登录</el-button>
+        <div align="left" style="margin-left: 10%; margin-top: 4%">
+          <el-checkbox v-model="checked" style="">我已阅读并同意蚯蚓农服 <a href="" style="color: #00afff">许可协议</a> 和 <a href="" style="color: #00afff">隐私政策</a></el-checkbox>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 
+<script>
+export default {
+  data() {
+    return {
+      showPassword: false,
+      hiddenImagePath: require('../login/img/眼睛_闭.png'),
+      visibleImagePath: require('../login/img/发现-眼睛.png'),
+      checked: false,
+      activeTab: '1',
+    };
+  },
+  methods: {
+    handleSelect(index) {
+      this.activeTab = index;
+      // 设置选中菜单字体颜色
+      const selectedItem = document.querySelector(`.el-menu-item[index="${index}"]`);
+      if (selectedItem) {
+        selectedItem.style.color = '#00B79D';
+      }
+    },
+    togglePasswordVisibility() {
+      this.showPassword =!this.showPassword;
+    }
+  },
+};
 </script>
 
-<template>
+<style>
+.page {
+  background-color: rgba(242, 242, 242, 1);
+  position: relative;
+  width: 1920px;
+  height: 100vh;
+  overflow: hidden;
+}
 
-</template>
+.content {
+  width: 36%;
+  height: 55vh;
+  background: white;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 25vh;
+}
+
+.gradient-button {
+  margin-top: 6%;
+  width: 80%;
+  height: 12%;
+  color: white;
+  font-size: 16px;
+  background: linear-gradient(to bottom, #9aecfd, #99e2d9);
+}
+
+.el-checkbox__inner:hover {
+  border-color: #00c0bf;
+}
+
+.el-checkbox__input.is-checked.el-checkbox__inner {
+  background-color: #00c0bf;
+  border-color: #00c0bf;
+}
+
+.el-checkbox__label {
+  color: #b3b3b3;
+}
+
+.el-checkbox__input.is-checked +.el-checkbox__label {
+  color: #b3b3b3;
+}
+
+input::-webkit-input-placeholder {
+  color: #b3b3b3;
+}
 
-<style scoped lang="scss">
+.password-eye-icon {
+  cursor: pointer;
+}
+.el-menu.el-menu--horizontal {
+  border-bottom: none;
+}
 
+.el-menu--horizontal >.el-menu-item.is-active {
+  border-bottom: none;
+  text-decoration: none;
+}
+.el-menu-item {
+  transition: none;
+  background-color: transparent;
+}
+.el-menu--horizontal.el-menu-item:not(.is-disabled):hover,.el-menu--horizontal.el-menu-item:not(.is-disabled):focus {
+  outline: none;
+  color: #00B79D;
+}
+.el-menu--horizontal .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
+  outline: none;
+  color: #00B79D;
+}
 </style>