更新页面

2023-07-05 16:10:50 +08:00
parent dce2261a74
commit ca49ce55c5
7 changed files with 559 additions and 33 deletions
--- a/src/components/Monthly/MonthlyItems.vue
+++ b/src/components/Monthly/MonthlyItems.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="MonItems">
+        <div class="Title"><i class="el-icon-s-promotion"></i>{{briefTitle}}</div>
+        <div class="State">
+            <div style="margin-top:10px">
+                <i class="el-icon-star-off"></i>&nbsp;Star:1400&nbsp;&nbsp;&nbsp;&nbsp;
+                <i class="el-icon-set-up"></i>&nbsp;Fork:755&nbsp;&nbsp;&nbsp;&nbsp;
+                <i class="el-icon-view"></i>&nbsp;浏览量:{{Items.lookCount}}
+            </div>
+            <div>
+                <el-button size="medium" type="primary" plain @click="changePage(Items.projectId)">详&nbsp;&nbsp;&nbsp;情</el-button>
+            </div>
+        </div>
+        <div class="ItemsContent">
+            {{briefDescribe}}
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "MonthlyItems",
+    data(){
+        return{
+            content:'随着《数据安全法》和《个人信息保护法》的相继颁布，隐私计算技术在近' +
+                '两年迎来了前所未有的热度。该项目是由密码学专家团队打造的隐私计算平台，它开箱即用、安全可靠，支持隐匿查询、' +
+                '隐私求交、联合统计、数据资源管理等功能，实现了“数据可用不可见”，为数据安全流通保驾护航。',
+        }
+
+    },
+    props:{
+        Items:{
+            type: Object,
+            default () {
+                return {}
+            }
+        }
+    },
+    computed:{
+        briefTitle: function(){
+            if(this.Items.projectTitle.length>=14){
+                return this.Items.projectTitle.substr(0, 13) + '...';
+            }else{
+                return this.Items.projectTitle;
+            }
+        },
+        briefDescribe: function(){
+            if(this.Items.projectDescription.length >= 151){
+                return this.Items.projectDescription.substr(0, 150) + '...';
+            }else {
+                return this.Items.projectDescription;
+            }
+        }
+    },
+    methods:{
+        //项目详情
+        changePage(id){
+            let pathInfo = this.$router.resolve({
+                path: '/ProjectDetail',
+                query:{
+                    id:id
+                }
+            })
+            window.open(pathInfo.href, '_self');
+            this.$router.go(0);
+        }
+        }
+}
+
+</script>
+
+<style scoped>
+.MonItems{
+    width:52vw;
+    margin-top:30px
+}
+.Title{
+    margin-left:0px;
+    width:fit-content;
+    color: #7bb6ff;
+    font-size:25px;
+    font-weight:550;
+}
+.Title:hover{
+    text-decoration-line:underline ;
+    color: #2b93ff;
+    cursor: pointer;
+}
+.State{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    margin-top:10px;
+    margin-left:0px;
+    width:48vw;
+    /*width:fit-content;*/
+    font-size:16px;
+    font-family: '华文细黑';
+    font-weight:700;
+    color: #6b6b6b;
+}
+.ItemsContent{
+    font-weight:550;
+    margin-top:8px;
+    margin-left:0px;
+    width:700px;
+    font-size:18px;
+    /*background-color: #ff4949;*/
+    line-height: 35px;
+    text-align: left;
+}
+</style>