csm样式

jeecgboot-vue3-master/src/views/demo/main-home/components/matchEvaluation/components/MCh.vue

@@ -6,7 +6,7 @@
                     <RouterLink to="/main-home">首页</RouterLink>
                 </div>
                 <div class="item">列表</div>
-<!--                <div class="item">优秀毕业生</div>-->
+                <!--                <div class="item">优秀毕业生</div>-->
             </div>
         </div>
     </div>
@@ -16,11 +16,13 @@
                 @click="$router.push(`/main-home/MatchEvaluation/LesserCh/${o.id}`)">
                 <div class="card">
                     <div class="card_left">
-                      <img :src="o.comimg" />
+                        <div class="big">{{ parseTime(o.createTime,'b') }}</div>
+                        <div class="small">{{parseTime(o.createTime,'a')}}</div>
+                        <!-- <img :src="o.comimg" /> -->
                     </div>
                     <div class="card_right">
                         <p class="tit">{{ o.title }}</p>
-                        <p class="text">
+                        <p class="text" v-if="o.info">
                             <span>{{ o.info }}</span>
                         </p>
                     </div>
@@ -29,7 +31,7 @@
             <div class="left_footer">
                 <div class="pagination-box">
                     <a-pagination v-model:current="current" v-model:page-size="pageSize"
-                        :page-size-options="['5','10', '20', '30', '40', '50']" :total="total"
+                        :page-size-options="['5', '10', '20', '30', '40', '50']" :total="total"
                         :show-total="total => `共 ${total} 项数据`" @change="pagChange" show-quick-jumper
                         show-size-changer />
                 </div>
@@ -48,11 +50,11 @@
             </div>
             <div class="message-box">
                 <div class="msg-item" v-for="o in data" :key="o.columnId"
-                     @click="$router.push(`/main-home/MatchEvaluation/LesserCh/${o.id}`)">
-                    <div class="msg-date">{{o.publishTime}}</div>
+                    @click="$router.push(`/main-home/MatchEvaluation/LesserCh/${o.id}`)">
+                    <div class="msg-date">{{ o.publishTime }}</div>
                     <div class="msg-date_"></div>
                     <div class="text">
-                      {{o.info}}
+                        {{ o.info }}
                     </div>
                 </div>
             </div>
@@ -70,11 +72,11 @@ const data = reactive<any[]>([])
 
 // 获取数据
 function getData(columnId: string) {
-  demoArticleListApi({ columnId: columnId, pageNo: current.value, pageSize: pageSize.value }).then(res => {
-    data.length = 0
-    data.push(...res.records as any[])
-    total.value = res.total
-  })
+    demoArticleListApi({ columnId: columnId, pageNo: current.value, pageSize: pageSize.value }).then(res => {
+        data.length = 0
+        data.push(...res.records as any[])
+        total.value = res.total
+    })
 }
 
 // 分页
@@ -87,7 +89,7 @@ function pagChange(page: number, pageSizeP: number) {
     getData(route.query.id as string)
 }
 
-watch(() => route.query.id, (newVal:string) => {
+watch(() => route.query.id, (newVal: string) => {
     if (newVal == '1') return
     getData(newVal as string)
 }, {
@@ -101,6 +103,14 @@ const onSearch = (searchValue: string) => {
     console.log('use value', searchValue);
     console.log('or use this.value', value.value);
 };
+
+function parseTime(strTime:string, type:string) {
+    if(typeof strTime !== 'string') return ''
+    const arr = strTime.split('-')
+    const a = `${arr[0]}.${arr?.[1]}`
+    const b = arr?.[2].split(' ')[0]
+    return  type === 'a' ? a : b
+}
 </script>
 
 <style lang="less" scoped>
@@ -142,32 +152,38 @@ const onSearch = (searchValue: string) => {
 
         .card-box-item {
             width: 950px;
-            height: 236px;
+            height: 106px;
             border-bottom: 1px solid #DCDCDC;
             display: flex;
             align-items: center;
-            cursor: pointer;
 
             .card {
-                width: 950px;
-                height: 180px;
                 display: flex;
 
                 .card_left {
-                    width: 167px;
-                    height: 180px;
-                    background: #D9D9D9;
-                    margin-right: 48px;
-
-                    img {
-                        width: 100%;
-                        height: 100%;
+                    text-align: center;
+                    width: 70px;
+
+                    .big {
+                        font-weight: 500;
+                        font-size: 30px;
+                        color: #0052FF;
+                        line-height: 30px;
+                    }
+
+                    .small {
+                        font-size: 12px;
+                        color: #0052FF;
+                        line-height: 20px;
                     }
                 }
 
                 .card_right {
-                    width: 677px;
-                    margin-top: 38px;
+                    margin-left: 10px;
+                    font-weight: 500;
+                    font-size: 18px;
+                    color: #000000;
+                    line-height: 24px;
 
                     .tit {
                         height: 24px;
@@ -270,7 +286,7 @@ const onSearch = (searchValue: string) => {
                 .msg-date {
                     width: @msg_width;
                     height: @msg_height;
-                  padding-left: 20px;
+                    padding-left: 20px;
                     display: flex;
                     justify-content: center;
                     align-items: center;