web/src/views/winParts/notesIndex.vue

<template>
  <el-row class="notes animate__animated animate__backInRight">
    <el-col :span="24" class="info">
      <div
        :class="['list', item.id == active ? 'activeList' : '']"
        v-for="item in list"
        :key="item.title"
        @mouseover="mouseOver(item)"
        @click="toChange(item)"
      >
        <el-col :span="24" class="imgs">
          <el-image class="images" :src="item.url"></el-image>
        </el-col>
        <el-col class="mess">
          <el-col :span="24" class="title">
            <span class="titles">{{ item.title }}</span>
            <span class="borderBottom"></span>
          </el-col>
          <el-col :span="24" class="other" v-if="item.id == active">
            <!-- <p>{{ item.brief1 }}</p>
            <p>{{ item.brief2 }}</p>
            <p>{{ item.brief3 }}</p> -->
          </el-col>
        </el-col>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
defineOptions({ name: 'notesIndex' })
import { ElMessageBox } from 'element-plus'
import { get } from 'lodash-es'
// 基础
import { ref } from 'vue'

const active = ref('1')
const list = ref([
  {
    id: '1',
    title: '水务公告',
    url: 'notes1.png',
    to: '/watersupplyIndex?tag=1',
    // brief1: '结果公式20240701',
    // brief2: '暖心供水服务，优化营商环境',
    // brief3: '长春水务集团自来水有限公司2022年--2023年末发行的新增地方政府专项债券资金收支情况表',
  },
  {
    id: '2',
    title: '水质报告',
    url: 'notes2.png',
    to: '/watersupplyIndex?tag=2',
    // brief1: '2024年9月水质报告',
    // brief2: '2024年8月水质信息',
    // brief3: '长春水务集团2024年7月 管网末梢水水质检测数据',
  },
  {
    id: '3',
    title: '停水信息',
    url: 'notes3.png',
    to: '/watersupplyIndex?tag=3',
    // brief1: '2024年11月10日 长春市高新区延时停水通知',
    // brief2: '2024年11月10日 长春市高新区延时停水通知',
    // brief3: '',
  },
  {
    id: '4',
    title: '管网压力',
    url: 'notes4.png',
    to: '/watersupplyIndex?tag=4',
    // brief1: '公示压力数据（1001-1031）',
    // brief2: '公示压力数据（1001-1031）',
    // brief3: '长春市城市供水管网 压力数据监测表2024年8月',
  },
  {
    id: '5',
    title: '长水e办',
    url: 'notes5.png',
    to: 'login',
    // brief1: '涉民入口',
    // brief2: '涉民入口',
    // brief3: '',
  },
  {
    id: '6',
    title: '网上缴费',
    url: 'notes6.png',
    to: '/watersupplyIndex?tag=6',
    // brief1: '业务办理',
    // brief2: '网络缴费',
    // brief3: '操作步骤',
  },
])

/* 切换 */
const toChange = (event: { id: string }) => {
  active.value = event?.id
  const item = list.value.find((f) => f.id == event.id)
  if (item) {
    const to = get(item, 'to')
    if (to == 'login') {
      // TODO:提示去登录
      ElMessageBox.alert('请登录', '提示', {
        confirmButtonText: '确定',
        callback: () => {
          // TODO:跳转
        },
      })
    } else {
      // 新开页面
      window.open(`${to}`)
    }
  }
}
// 类型
const mouseOver = async (data: any) => {
  active.value = data.id
}
</script>
<style scoped lang="scss">
.notes {
  .info {
    display: flex;
    gap: 10px;

    .list {
      width: 16%;
      height: 260px;
      position: relative;

      .imgs {
        .images {
          width: 100%;
          height: 260px;
          border-radius: 10px;
        }
      }

      .mess {
        position: absolute;
        top: 0;
        width: 100%;
        height: 260px;
        border-radius: 10px;
        padding: 0 10px;

        background-color: #ffffff5f;

        .title {
          display: flex;
          flex-direction: column;
          padding: 20px 0 10px 0;

          .titles {
            color: rgb(2, 68, 139);
            // font-family: '黑体';
            font-size: 24px;
            font-weight: 500;
            line-height: 35px;
            letter-spacing: 0px;
          }
        }

        .other {
          position: absolute;
          bottom: 30px;

          p {
            color: #ffffff;
            font-size: 12px;
            margin: 0 0 10px 0;
          }
        }
      }
    }

    .activeList {
      width: 20%;
      animation: mymove 1s;
      animation-iteration-count: 1;

      .mess {
        background-color: #30a0ff9f;

        .title {
          .titles {
            color: rgb(255, 255, 255);
            // font-family: '黑体';
            font-size: 24px;
            font-weight: 500;
            line-height: 35px;
            letter-spacing: 2px;
            margin: 0 0 10px 0;
          }

          .borderBottom {
            display: inline-block;
            width: 60px;
            border-bottom: 2px solid #ffffff;
          }
        }

        .other {
          p {
            color: rgb(255, 255, 255);
            // font-family: '黑体';
            font-size: 16px;
            font-weight: 500;
            line-height: 23px;
            letter-spacing: 0px;
          }
        }
      }
    }
  }
}

@keyframes mymove {
  from {
    width: 15%;
  }

  to {
    width: 20%;
  }
}
</style>