feat(login/home): 优化登录页密码显示图标和样式，添加首页项目筛选和分类功能

hejianhao

2026-01-15 d2db30c983a5442730f4550c1a4038b4d815b08d

feat(login/home): 优化登录页密码显示图标和样式，添加首页项目筛选和分类功能

- 登录页密码图标改为条件渲染，调整尺寸样式
- 首页添加项目类型筛选和ABC分类显示功能
- 修复代码格式问题，统一引号风格
- 新增相关样式类和背景图配置

 screen/src/view/home/index.vue

@@ -12,7 +12,7 @@
        固定资产
      </div>
      <div class="activeBox" :class="activeTab == 2 && 'activeBox2'">
        在建工程
        占位盒子
      </div>
    </div>
    <div class="flex a-center absolute left--14 bottom--14">
@@ -39,6 +39,41 @@
            <div class="fs--14 lh--14 ml--10">已整改</div>
            <div class="color7 ml--13 fs--20 lh--24 zh_tr">2</div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="absolute bottom0 h--120 w--250 py--29 px--37 bgimg5"
      style="right: 505px"
    >
      <div class="flex a-center j-between fs--12 SHSR c-fff">
        <div class="flex a-center gap--14 cursor-pointer">
          <img
            src="../../assets/img/home/Combined Shape@2x.png"
            class="w--16 h--16 shrink0"
          />
          <div>市政</div>
        </div>
        <div class="flex a-center gap--14 cursor-pointer">
          <img
            src="../../assets/img/home/Shape@2x (4).png"
            class="w--18 h--16 shrink0"
          />
          <div>房建</div>
        </div>
      </div>
      <div class="flex a-center j-between gap--23 px--13 fs--12 SHSR mt--26">
        <div class="flex a-center flex-column cursor-pointer">
          <div class="w--8 h--8 mb--5 br50 bgcolor8"></div>
          <div class="color8">A类</div>
        </div>
        <div class="flex a-center flex-column cursor-pointer">
          <div class="w--8 h--8 mb--5 br50 bgcolor9"></div>
          <div class="color9">B类</div>
        </div>
        <div class="flex a-center flex-column cursor-pointer">
          <div class="w--8 h--8 mb--5 br50 bgcolor10"></div>
          <div class="color10">C类</div>
        </div>
      </div>
    </div>
@@ -70,7 +105,15 @@
      <div
        class="flex a-center j-between w100 pl--20 mt--13 h--40 relative bgcolor1 searchBox"
      >
        <el-select filterable placeholder="请输入项目名称" />
        <el-select filterable v-model="projectId" placeholder="请输入项目名称">
          <el-option
            v-for="item in [1, 2]"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <div class="btn">搜索</div>
      </div>
      <div class="mt--33">
@@ -277,10 +320,7 @@
                ref="carousel"
                @change="handleChangeCarousel"
              >
                <el-carousel-item
                  v-for="(item, index) in 4"
                  :key="index"
                >
                <el-carousel-item v-for="(item, index) in 4" :key="index">
                  <div>
                    <img
                      src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/1bcd9db5-c909-4edc-a3d2-61cc33c54462.jpg"
@@ -299,7 +339,11 @@
                  <img
                    v-for="(item, index) in 4"
                    :key="index"
                    :src="activeIndex === index ? require('../../assets/img/home/Rectangle@2x.png') : require('../../assets/img/home/Rectangle@2x (1).png')"
                    :src="
                      activeIndex === index
                        ? require('../../assets/img/home/Rectangle@2x.png')
                        : require('../../assets/img/home/Rectangle@2x (1).png')
                    "
                    class="w--18 h--4 shrink0 cursor-pointer"
                    @click="changeActiveIndex(index)"
                  />
@@ -330,6 +374,7 @@
      scrollTimer: null, // 滚动定时器
      scrollContainer: null, // 滚动容器引用
      activeIndex: 0, // 当前活动索引
      projectId: null,
    };
  },
  watch: {
@@ -360,7 +405,7 @@
    // 切换活动索引
    changeActiveIndex(index) {
      this.activeIndex = index;
      this.$refs.carousel.setActiveItem(index)
      this.$refs.carousel.setActiveItem(index);
    },
    // 切换活动索引
    handleChangeCarousel(index) {
@@ -533,6 +578,11 @@
  height: 94px;
}

.bgimg5 {
  background-image: url("../../assets/img/home/25@2x.png");
  background-size: 100% 100%;
}

.color5 {
  color: #ff4d04;
}
@@ -543,6 +593,18 @@

.color7 {
  color: #47a1ff;
}

.color8 {
  color: #00ffd2;
}

.color9 {
  color: #ff4d4f;
}

.color10 {
  color: #ffc53d;
}

.bgcolor4 {
@@ -560,10 +622,23 @@
  border-radius: 2px 0px 0px 10px;
  border: 1px solid #e5484d;
}

.bgcolor7 {
  background: rgba(14, 95, 255, 0.2);
}

.bgcolor8 {
  background: #00ffd2;
}

.bgcolor9 {
  background: #ff4d4f;
}

.bgcolor10 {
  background: #ffc53d;
}

.activeBox {
  position: absolute;
  top: 0;

 screen/src/view/login/index.vue

@@ -41,12 +41,14 @@
            @click="togglePassword"
          >
            <img
              :src="
                showPassword
                  ? '../../assets/img/login/eye-open.png'
                  : '../../assets/img/login/eye-close.png'
              "
              class="w--29 h--29 shrink0"
              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>
@@ -154,7 +156,7 @@
            src="../../assets/img/login/active.png"
            class="w--24 h--24 shrink0"
          />
           <img
          <img
            v-else
            src="../../assets/img/login/noActive.png"
            class="w--24 h--24 shrink0"
@@ -162,8 +164,18 @@
        </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>
        <div class="px--59 lh--40 br--4 bgcolor3 cursor-pointer" @click="confirmSelect">确定</div>
        <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>
      </div>
    </div>
  </div>
@@ -190,13 +202,13 @@
      showPassword: false,
      showLoginBox: true,
      accountList: [
        { id: 1, name: '委托方名称111' },
        { id: 2, name: '委托方名称222' },
        { id: 3, name: '委托方名称333' },
        { id: 4, name: '委托方名称444' },
        { id: 5, name: '委托方名称555' }
        { id: 1, name: "委托方名称111" },
        { id: 2, name: "委托方名称222" },
        { id: 3, name: "委托方名称333" },
        { id: 4, name: "委托方名称444" },
        { id: 5, name: "委托方名称555" },
      ],
      selectedAccount: null
      selectedAccount: null,
    };
  },
  computed: {},
@@ -357,12 +369,14 @@
    confirmSelect() {
      if (this.selectedAccount) {
        // 获取选中的账号信息
        const account = this.accountList.find(item => item.id === this.selectedAccount);
        console.log('选择的账号:', account);
        const account = this.accountList.find(
          (item) => item.id === this.selectedAccount
        );
        console.log("选择的账号:", account);

        // 这里可以添加实际的登录逻辑
        // 模拟跳转到首页
        this.$router.push('/home');
        this.$router.push("/home");
      } else {
        Message({
          message: "请先选择一个账号",