通知列表

wwf

昨天 34f5733bc1f126c572580fa849b9403dfcddd84b

通知列表

 src/assets/images/contentBg.png

 src/assets/images/footerBg.png

 src/assets/images/home/appraisalPlan.png

 src/assets/images/home/certificate.png

 src/assets/images/home/examTicket.png

 src/assets/images/home/score.png

 src/assets/images/test.png

Binary files differ

 src/assets/styles/global.css

@@ -273,4 +273,10 @@

.el-card__body {
  padding-bottom: 0;
}

.text-title {
  color: white;
  font-size: 32px;
  font-weight: bold;
}

 src/router/main/appraisalPlan/index.js

New file
@@ -0,0 +1,9 @@
const appraisalPlan = [
  {
    path: 'appraisalPlan',
    name: '评价计划',
    component: () => import('@/views/main/appraisalPlan/index.vue'),
  },
]

export default appraisalPlan

 src/router/main/index.js

@@ -1,9 +1,11 @@
import home from '@/router/main/home/index.js'
import notice from '@/router/main/notice/index.js'
import appraisalPlan from '@/router/main/appraisalPlan'

const mainRouter = [
  ...home,
  ...notice
  ...notice,
  ...appraisalPlan
]
const router = [
  {

 src/router/main/notice/index.js

@@ -5,7 +5,7 @@
    component: () => import('@/views/main/notice/list.vue'),
  },
  {
    path: 'noticeDetail',
    path: 'noticeDetail/:id',
    name: '公告详情',
    component: () => import('@/views/main/notice/detail.vue'),
  },

 src/views/login/index.vue

@@ -36,7 +36,7 @@
          <el-checkbox v-model="form.agreement" label="同意xxx服务协议" size="large" />
        </el-form-item>

        <el-button class="mt-1" @click="submitLogin()" type="primary" size="large" style="width: 100%;">
        <el-button class="mt-1" @click="submitLogin()" :loading="loginLoading" type="primary" size="large" style="width: 100%;">
          <el-text class="text-lg text-white">登录</el-text>
        </el-button>
      </el-form>
@@ -101,12 +101,14 @@

<script>
import { useLoginStore } from '@/stores/login.js'
import { useSessionStore } from '@/stores/session.js'
import { storeToRefs } from 'pinia';
export default {
  components: {},
  setup() {
    const { loginDialogVisible } = storeToRefs(useLoginStore())
    return { loginDialogVisible }
    const { setUserInfo } = useSessionStore()
    return { loginDialogVisible, setUserInfo }
  },
  data() {
    return {
@@ -129,13 +131,14 @@
      countdown: 180,
      countdownInterval: null,
      sendCodeLoading: false,
      loginLoading: false
    }
  },
  computed: {
    title() {
      let obj = {
        register: '注 册',
        mobile: '手 机 号登 录',
        mobile: '手 机 号 登 录',
        qrCode: '微 信 扫 码 登 录'
      }
      return obj[this.loginType]
@@ -179,10 +182,25 @@
    async submitLogin() {
      try {
        await this.$refs.accountForm.validate()
        this.loginLoading = true
        setTimeout(() => {
          localStorage.setItem('accessToken', '123456')
          this.getUserInfo()
          this.$message.success('登录成功')
          this.loginDialogVisible = false
          this.loginLoading = false

        }, 1000)
      } catch (error) {
        console.log()
      }
    },
    getUserInfo() {
      this.setUserInfo({
        id: '123456',
        username: '黄婷婷',
      })
    },
    async submitRegister() {
      try {
        await this.$refs.registerForm.validate()

 src/views/main/appraisalPlan/index.vue

New file
@@ -0,0 +1,245 @@
<template>
  <div>
    <div class="content-bg">
      <div class="main-content">
        <ReturnBtn></ReturnBtn>

        <el-row class="mt-6">
          <el-text class="text-title">评价计划</el-text>
        </el-row>

        <el-row class="mt-5">
          <el-input 
            v-model="filter.keyword" 
            style="width: 739px;height: 70px;"
            placeholder="搜索职业名称或职业编码进行查询" 
          >
            <template #append>
              <el-button class="append-btn" type="primary">
                <el-text class="text-white text-xl">搜 索</el-text>
              </el-button>
            </template>
          </el-input>
        </el-row>
      </div>
    </div>
    <div class="main-content py-4">
      <el-form-item label="等级：" class="mb-6">
        <el-radio-group  v-model="filter.level">
          <el-radio
            v-for="(item,index) in levelItems"
            :key="`radio${index}`"
            :value="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="考点：" class="mb-6">
        <el-select v-model="filter.area" placeholder="筛选地市" style="width: 240px">
          <el-option
            v-for="item in areaItems"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-table 
        :data="filterList" 
        table-layout="auto" 
        stripe
        empty-text="暂无评价计划信息~"
        style="width: 100%"
      >
        <el-table-column
          v-for="(item,index) in headers" :key="`table${index}`" 
          :prop="item.value" 
          :label="item.label" 
          :width="item.width"
          :align="item.align || 'start'"
          :sortable="item.sortable"
        >
          <template #signupTime="{ row }">
            {{ row }}
          </template>
        </el-table-column>
      </el-table>

      <el-row justify="end" class="my-7" v-if="noticeList.length > 0">
        <el-text class="mr-4 text-note">共{{ totalCount }}项数据</el-text>
        <el-pagination
          v-model:current-page="filter.pageNo"
          v-model:page-size="filter.pageSize"
          background 
          layout="prev, pager, next" 
          :total="totalCount" 
        />
      </el-row>
    </div>
  </div>
  
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      size: 5,
      filter: {
        pageNo: 1,
        pageSize: 5,
        keyword: '',
        level: '',
        area: '',
      },
      areaItems: [
        { label: '广东省', value: '' },
        { label: '广州市', value: '广州市' },
        { label: '深圳市', value: '深圳市' }
      ],
      levelItems: [
        { label: '全部', value: '' },
        { label: '五级/初级工', value: '5' },
        { label: '四级/初级工', value: '4' },
        { label: '三级/初级工', value: '3' },
        { label: '二级/初级工', value: '2' },
        { label: '一级/初级工', value: '1' },
      ],
      noticeList: [],
      headers: [
        { label: '职业（工种）名称', value: 'occupationJob' },
        { label: '等级', value: 'level' },
        { label: '考点', value: 'examAddress' },
        { label: '评价计划名称', value: 'planName', width: 150 },
        { label: '报名时间', value: 'signupTime' },
        { label: '评价机构信息', value: 'orgInfo' },
        { label: '操作', value: 'operation', align: 'center' },
      ],
      planList: []
    }
  },
  computed: {
    filterList() {
      return this.planList.slice((this.filter.pageNo-1)*this.filter.pageSize, this.filter.pageNo*this.filter.pageSize)
    }
  },
  created() {
    this.getPlanList()
  },
  methods: {
    getPlanList() {
      setTimeout(() => {
        this.planList = 
        [
          {
            id: '1',
            occupationJob: "互联网营销师（视频创推员）",
            level: '三级',
            examAddress: '中山市',
            planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
            startTime: '2025-11-19 09:00',
            endTime: '2025-12-22 18:00',
            orgInfo: {
              name: '中山市技师学院',
              concatName: '吴*宁',
              mobile: '13424571164'
            }
          },
          {
            id: '2',
            occupationJob: "电工",
            level: '三级',
            examAddress: '中山市',
            planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
            startTime: '2025-11-19 09:00',
            endTime: '2025-12-22 18:00',
            orgInfo: {
              name: '中山市技师学院',
              concatName: '吴*宁',
              mobile: '13424571164'
            }
          },
          {
            id: '3',
            occupationJob: "电工",
            level: '三级',
            examAddress: '中山市',
            planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
            startTime: '2025-11-19 09:00',
            endTime: '2025-12-22 18:00',
            orgInfo: {
              name: '中山市技师学院',
              concatName: '吴*宁',
              mobile: '13424571164'
            }
          },
          {
            id: '4',
            occupationJob: "电工",
            level: '三级',
            examAddress: '中山市',
            planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
            startTime: '2025-11-19 09:00',
            endTime: '2025-12-22 18:00',
            orgInfo: {
              name: '中山市技师学院',
              concatName: '吴*宁',
              mobile: '13424571164'
            }
          },
          {
            id: '5',
            occupationJob: "电工",
            level: '三级',
            examAddress: '中山市',
            planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
            startTime: '2025-11-19 09:00',
            endTime: '2025-12-22 18:00',
            orgInfo: {
              name: '中山市技师学院',
              concatName: '吴*宁',
              mobile: '13424571164'
            }
          },
          {
            id: '6',
            occupationJob: "电工",
            level: '三级',
            examAddress: '中山市',
            planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
            startTime: '2025-11-19 09:00',
            endTime: '2025-12-22 18:00',
            orgInfo: {
              name: '中山市技师学院',
              concatName: '吴*宁',
              mobile: '13424571164'
            }
          },
        ]
        this.totalCount = 6
      }, 400)
    },
  }
}

</script>
<style scoped>
.content-bg {
  height: 240px;
  background-image: url('@/assets/images/contentBg.png');
  background-repeat: no-repeat, no-repeat, repeat; /* 分别设置 */
  background-size: cover;
}
:deep(.el-input__inner) {
  padding-left: 10px;
  font-size: 18px;
}
.append-btn {
  width: 114px;
  height: 100%;
  background-color: var(--el-color-primary) !important;
}
</style>

 src/views/main/components/MyFooter.vue

@@ -66,7 +66,9 @@
  align-items: center;
  background-color: #007AFF;
  margin-top: 30px;
  /* background-image: url('@/assets/images/test.png'); */
  background-image: url('@/assets/images/footerBg.png');
  background-repeat: no-repeat, no-repeat, repeat; /* 分别设置 */
  background-size: cover;
}
:deep(.el-select__wrapper) {
  min-height: 44px;

 src/views/main/components/MyHeader.vue

@@ -2,7 +2,7 @@
  <div class="custom-header">
    <el-row class="content" justify="space-between">
      <el-text class="text-white text-2xl font-bold">广东省技能人才评价考务管理平台</el-text>
      <el-dropdown v-if="!userInfo.id" placement="bottom">
      <el-dropdown v-if="userInfo.id" placement="bottom">
        <el-row  align="middle">
          <Icon icon="fa:user-circle" width="22" height="22" class="mr-2"  style="color: #fff" />
          <el-text class="text-white cursor-p text-lg font-bold">黄婷婷</el-text>
@@ -11,7 +11,7 @@
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
            <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
@@ -30,17 +30,42 @@
export default {
  setup() {
    const { loginDialogVisible } = storeToRefs(useLoginStore())
    const { setUserInfo } = useSessionStore()
    const { userInfo } = storeToRefs(useSessionStore())
    return { loginDialogVisible, userInfo }
    return { loginDialogVisible, userInfo, setUserInfo }
  },
  data() {
    return {
      
    }
  },
  created() {
    const token =  localStorage.getItem('accessToken')
    if (token) {
      this.getUserInfo()
    }
  },
  methods: {
    login() {
      this.loginDialogVisible = true
    },
    getUserInfo() {
      setTimeout(() => {
        this.setUserInfo({
          id: '12345',
          username: '黄婷婷'
        })
      }, 1000)
    },
    logout() {
      this.$messageBox.confirm('确定要退出登录吗', '提示', 
      { confirmButtonText: '确定', cancelButtonText: '取消', type: 'error' }).then(res => {
        if (res == 'confirm') {
          localStorage.removeItem('accessToken')
          this.setUserInfo({})
          this.$message.success('退出登录')
        }
      })
    }
  }
}

 src/views/main/components/ReturnBtn.vue

@@ -1,16 +1,20 @@
<template>
  <el-button text class="pl-0 pr-2 my-1" @click="goBack">
    <el-row align="middle">
      <Icon icon="mingcute:home-6-line" width="16" height="16" style="color: var(--el-color-primary)" />
      <el-text class="ml-1" style="color: var(--el-color-primary);">返回首页</el-text>
    </el-row>
  </el-button>
  <el-row align="middle" class="pl-0 pr-2 py-2 cursor-p" @click="goBack">
    <Icon icon="mingcute:home-6-line" width="16" height="16" :style="{color: this.color}" />
    <el-text class="ml-1" :style="{color: this.color}">返回首页</el-text>
  </el-row>
</template>
<script>
export default {
  props: {
    color: {
      type: String,
      default: 'white'
    }
  },
  methods: {
    goBack() {
      this.$router.replace('/main/home')
      this.$router.go('-1')
    }
  }
}

 src/views/main/home/index.vue

@@ -7,16 +7,15 @@
    </el-image>
    <div class="main-content">
      <el-row justify="space-between">
        <el-card 
        <div 
          v-for="(item,index) in operationList"
          :key="`operation${index}`"
          shadow="hover"
          style="max-width: 270px;"
          class="cursor-p my-4"
          class="cursor-p my-4 p-0"
          @click="goOperationPage(item)"
        >
          <el-image :src="$getImageUrl(`/home/${item.value}.png`)">
          <el-image style="max-width: 270px;" :src="$getImageUrl(`/home/${item.value}.png`)">
          </el-image>
        </el-card>
        </div>
      </el-row>

      <el-row justify="space-between" class="py-2" style="border-bottom: 2px solid var(--el-color-primary);">
@@ -24,7 +23,7 @@
          <span style="color: var(--el-color-primary);">通知</span>
          <span>公告</span>
        </el-text>
        <el-button text type="primary">查看全部>></el-button>
        <el-button text type="primary" @click="goNoticeList()">查看全部>></el-button>
      </el-row>
      
      <el-card 
@@ -42,7 +41,7 @@
            </el-row>
          </div>
          <div>
            <el-button text type="primary">点击查看详情>></el-button>
            <el-button text type="primary" @click="goNoticeDetail(notice.id)">点击查看详情>></el-button>
          </div>
        </el-row>
      </el-card>
@@ -64,7 +63,7 @@
        { name: "成绩查询", value: 'score' },
        { name: "证书查询", value: 'certificate' },
      ],
      noticeList: []
      noticeList: [],
    }
  },
  created() {
@@ -76,32 +75,46 @@
        this.noticeList = 
        [
          {
            id: '1',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '2',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '3',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '4',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '5',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
        ]
      }, 400)
    },
    goNoticeDetail(id) {
      this.$router.push(`/main/noticeDetail/${id}`)
    },
    goNoticeList() {
      this.$router.push('/main/noticeList')
    },
    goOperationPage(item) {
      this.$router.push(`/main/${item.value}`)
    }
  }
}

 src/views/main/notice/detail.vue

@@ -1,6 +1,6 @@
<template>
  <div class="main-content">
    <ReturnBtn></ReturnBtn>
    <ReturnBtn color="var(--el-color-primary)"></ReturnBtn>

    <el-card shadow="never" class="p-6">
      <!-- 标题 -->

 src/views/main/notice/list.vue

@@ -1,3 +1,197 @@
<template>
  <div class="main-content">列表</div>
</template>
  <div>
    <div class="content-bg">
      <div class="main-content">
        <ReturnBtn></ReturnBtn>

        <el-row class="mt-6">
          <el-text class="text-title">通知公告</el-text>
        </el-row>

        <el-row class="mt-5">
          <el-input 
            v-model="filter.keyword" 
            style="width: 739px;height: 70px;"
            placeholder="输入关键字搜索" 
          >
            <template #append>
              <el-button class="append-btn" type="primary">
                <el-text class="text-white text-xl">搜 索</el-text>
              </el-button>
            </template>
          </el-input>
        </el-row>
      </div>
    </div>
    <div class="main-content py-4">
      <el-row class="mb-6">
        <el-select v-model="filter.area" placeholder="筛选所属地区" style="width: 240px">
          <el-option
            v-for="item in areaItems"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-row>

      <el-card 
        v-for="(notice,index) in filterNoticeList" 
        :key="`notice${index}`"
        class="mt-3 p-4 py-3"
        shadow="never"
      >
        <el-row justify="space-between" align="middle">
          <div>
            <el-row><el-text class="text-lg text-black font-medium">{{ notice.title }}</el-text></el-row>
            <el-row class="mt-2">
              <el-text style="margin-right: 40px;">发布时间：{{ notice.publishTime }}</el-text>
              <el-text>所属地区：{{ notice.area }}</el-text>
            </el-row>
          </div>
          <div>
            <el-button text type="primary" @click="goNoticeDetail(notice.id)">点击查看详情>></el-button>
          </div>
        </el-row>
      </el-card>

      <el-row justify="end" class="my-7" v-if="noticeList.length > 0">
        <el-text class="mr-4 text-note">共{{ totalCount }}项数据</el-text>
        <el-pagination
          v-model:current-page="filter.pageNo"
          v-model:page-size="filter.pageSize"
          background 
          layout="prev, pager, next" 
          :total="totalCount" 
        />
      </el-row>

      <el-row class="mt-5" v-if="noticeList.length == 0" justify="center">
        <el-text>暂无公告~</el-text>
      </el-row>
    </div>
  </div>
  
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      size: 5,
      filter: {
        pageNo: 1,
        pageSize: 5,
        keyword: '',
        area: '',
      },
      areaItems: [
        { label: '广东省', value: '' },
        { label: '广州市', value: '广州市' },
        { label: '深圳市', value: '深圳市' }
      ],
      noticeList: [],
    }
  },
  computed: {
    filterNoticeList() {
      return this.noticeList.slice((this.filter.pageNo-1)*this.filter.pageSize, this.filter.pageNo*this.filter.pageSize)
    }
  },
  created() {
    this.getNoticeList()
  },
  methods: {
    getNoticeList() {
      setTimeout(() => {
        this.noticeList = 
        [
          {
            id: '1',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知1",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '2',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知2",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '3',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知3",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '4',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知4",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '5',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知5",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '6',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知6",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '7',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知7",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '8',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知8",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '9',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知9",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '10',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知10",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
        ]
        this.totalCount = 10
      }, 400)
    },
    goNoticeDetail(id) {
      this.$router.push(`/main/noticeDetail/${id}`)
    },
  }
}

</script>
<style scoped>
.content-bg {
  height: 240px;
  background-image: url('@/assets/images/contentBg.png');
  background-repeat: no-repeat, no-repeat, repeat; /* 分别设置 */
  background-size: cover;
}
:deep(.el-input__inner) {
  padding-left: 10px;
  font-size: 18px;
}
.append-btn {
  width: 114px;
  height: 100%;
  background-color: var(--el-color-primary) !important;
}
</style>