页面优化

client/src/views/OaSystem/home/components/CardItemThree.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="ThreeDetailBox">
     <ul>
-      <li v-for="(item, index) in signs" :key="index">
+      <li
+        v-for="(item, index) in signs"
+        :class="{ active: currentIndex === index }"
+        :key="index"
+        @click="clickHandle(item, index)"
+      >
         <span class="circle">{{ item['icon'] }}</span>
         <div>
           <p class="title">{{ item['title'] }}</p>
@@ -16,14 +21,13 @@
 </template>
 
 <script setup lang="ts">
-const signs = ref<
-  {
-    icon: string
-    title: string
-    value: number
-    unit: string
-  }[]
->([
+interface SignInterface {
+  icon: string
+  title: string
+  value: number
+  unit: string
+}
+const signs = ref<SignInterface[]>([
   { icon: '签', title: '2023年度签约', value: 15005.65, unit: '万元' },
   { icon: '回', title: '2023年度回款', value: 15005.65, unit: '万元' },
   { icon: '净', title: '2023年度净合同额', value: 15005.65, unit: '万元' },
@@ -31,12 +35,19 @@ const signs = ref<
   { icon: '应', title: '总应收款', value: 15005.65, unit: '万元' },
   { icon: '余', title: '总合同余额', value: 15005.65, unit: '万元' }
 ])
+const currentIndex = ref<number>(0)
+const $emit = defineEmits<{
+  (e: 'click', v: SignInterface): void
+}>()
+const clickHandle = (item: SignInterface, index: number): void => {
+  currentIndex.value = index
+  $emit('click', item)
+}
 </script>
 
 <style lang="scss" scoped>
-@import '../common.scss';
 .ThreeDetailBox {
-  padding: 30px 20px;
+  padding: 35px 20px;
   height: 100%;
   > ul {
     height: 100%;
@@ -46,36 +57,42 @@ const signs = ref<
     align-content: space-between;
     > li {
       padding: 10px 20px;
-      border-radius: 4px;
+      border-radius: 8px;
       border: 2px solid transparent;
       cursor: pointer;
-      &:hover {
-        border-color: #498bef;
-        background: linear-gradient(270deg, #eaf4ff 0%, #f9fcff 100%);
-      }
       &:nth-child(2n + 1) {
         margin-right: 15px;
       }
       display: flex;
       > .circle {
         display: block;
-        width: 56px;
-        height: 56px;
-        line-height: 56px;
+        width: 66px;
+        height: 66px;
+        line-height: 66px;
         border-radius: 50%;
         background-color: #498bef;
         color: #fff;
-        font-size: 18px;
+        font-size: 22px;
         text-align: center;
         margin-right: 5px;
       }
+      &:nth-child(1),
+      &:nth-child(2) {
+        &.active,
+        &:hover {
+          border-color: #498bef;
+          background: linear-gradient(270deg, #eaf4ff 0%, #f9fcff 100%);
+        }
+      }
       &:nth-child(3),
       &:nth-child(4) {
         > .circle {
           background-color: #05ce9e;
         }
+        &.active,
         &:hover {
           border-color: #05ce9e;
+          background: linear-gradient(270deg, #eaf4ff 0%, #f9fcff 100%);
         }
       }
       &:nth-child(5),
@@ -83,18 +100,27 @@ const signs = ref<
         > .circle {
           background-color: #f9a527;
         }
-        &:hover {
-          border-color: #f9a527;
-        }
       }
       > div {
         > .title {
           color: #2d333c;
-          font-size: 15px;
+          font-size: 16px;
           margin-bottom: 5px;
         }
       }
     }
   }
+  .numberBox {
+    > .number {
+      font-size: 26px;
+      font-weight: bold;
+    }
+    > .unit {
+      font-size: 16px;
+      margin-left: 3px;
+      font-weight: 500;
+      color: #2d333c;
+    }
+  }
 }
 </style>

client/src/views/OaSystem/home/index.vue

@@ -48,7 +48,7 @@ if (roles) {
   } else if (roles.indexOf('test_marketing') != -1) {
     currentIndex.value = '2'
   } else {
-    currentIndex.value = '3'
+    currentIndex.value = '1'
   }
 }
 </script>

client/src/views/OaSystem/home/indexOne.vue

@@ -25,7 +25,7 @@
       </div>
       <div class="bottomBox">
         <div>
-          <CardItemThree />
+          <CardItemThree @click="clickHandle" />
         </div>
         <div>
           <div class="header">
@@ -75,6 +75,7 @@ const router = useRouter()
 const moreHandle = () => {
   router.push({ path: '/newsLook' })
 }
+const clickHandle = (): void => {}
 </script>
 
 <style lang="scss" scoped>

client/src/views/OaSystem/newsCenter/newsLook/lookDetail.vue

@@ -12,6 +12,7 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 import request from '@/config/axios'
+import { ElMessage } from 'element-plus'
 
 const detailForm = ref<{
   title: string
@@ -42,7 +43,19 @@ function addReadNum(idStr: any) {
   }
   request.get({ url: urlApi, params })
 }
-function copyHandle() {}
+function copyHandle(): void {
+  if (!query.id) return
+  const input = document.createElement('input')
+  input.style.cssText = 'opacity: 0'
+  input.type = 'text'
+  const uri = `/newsRead.html?id=${query.id}`
+  input.value = new URL(uri, import.meta.url).href
+  document.body.appendChild(input)
+  input.select()
+  document.execCommand('copy')
+  input.remove()
+  ElMessage.success('链接复制成功！')
+}
 const route = useRoute()
 const query = route.query
 if (query.id) {

client/src/views/OaSystem/oaLayout/menusActive.vue

@@ -60,7 +60,7 @@ onMounted(() => {
     width: auto;
     padding: 20px 10px;
     border-radius: 16px;
-    background-color: rgba($color: #e8eef9, $alpha: 0.4);
+    background-color: rgba($color: #e8eef9, $alpha: 0.8);
     backdrop-filter: blur(20px);
     box-shadow: 0px 0px 8px 1px rgba(106, 132, 164, 0.41);
     li {

client/src/views/OaSystem/oaLayout/tagList.vue

@@ -165,7 +165,7 @@ const closeLeftTags = () => {
 const closeRightTags = () => {
   tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
 }
-
+const tagsHomeClick = () => {}
 // 新增tag
 const addTags = () => {
   const { name } = unref(currentRoute)

client/src/views/OaSystem/personnelManagement/components/OaCalendar.vue

@@ -50,7 +50,7 @@ const _iconList: Object = {
   '3': getAssetURL('kq/3'),
   '4': null
 }
-const getWorkDayList = async () => {
+const getWorkDayList = async (): Promise<any> => {
   const nowTimeObj = moment(nowTime.value)
   const urlApi = `/adm/workday/list`
   const params = {
@@ -62,7 +62,7 @@ const getWorkDayList = async () => {
   }
   return await request.get({ url: urlApi, params })
 }
-const getDailyReportList = async () => {
+const getDailyReportList = async (): Promise<any> => {
   const nowTimeObj = moment(nowTime.value)
   const urlApi = `/adm/report/query-month`
   const params = {
@@ -71,7 +71,7 @@ const getDailyReportList = async () => {
   }
   return await request.get({ url: urlApi, params })
 }
-const getAttendanceSheetListMine = async () => {
+const getAttendanceSheetListMine = async (): Promise<any> => {
   const nowTimeObj = moment(nowTime.value)
   const urlApi = `/adm/attendance-sheet/list-me`
   const params = {
@@ -83,7 +83,7 @@ const getAttendanceSheetListMine = async () => {
   return await request.get({ url: urlApi, params })
 }
 
-const initDailyReportData = async () => {
+const initDailyReportData = async (): Promise<any> => {
   const dailyReports: [] = await getDailyReportList()
   const workdayMap: Map<String, Object> = new Map()
   dailyReports.forEach((item) => {
@@ -111,12 +111,12 @@ const initDailyReportData = async () => {
     }
   })
 }
-const lastClick = () => {
+const lastClick: () => void = (): void => {
   let time: any = moment(nowTime.value).subtract(1, 'months').format('YYYY-MM')
   nowTime.value = moment(time).format('YYYY-MM')
   initDailyReportData()
 }
-const nextClick = () => {
+const nextClick: () => void = (): void => {
   let time: any = moment(nowTime.value).add(1, 'months').format('YYYY-MM')
   nowTime.value = moment(time).format('YYYY-MM')
   initDailyReportData()