首页中间图片的跳转和样式更改

src/views1/Page/PageView.vue

@@ -52,22 +52,22 @@
           </div>
         </div>
         <div class="cen—bottom">
-          <div class="one">
+          <router-link :to="{ path: '/home/doc/personal' }" class="one">
             <p>个人文档</p>
             <img src="../../assets/img/MMB1.png" alt="" />
-          </div>
-          <div class="two">
+          </router-link>
+          <router-link :to="{ path: '/home/doc/dept' }" class="two">
             <p>部门文档</p>
             <img src="../../assets/img/MMB2.png" alt="" />
-          </div>
-          <div class="three">
+          </router-link>
+          <router-link :to="{ path: '/home/doc/public' }" class="three">
             <p>公共文档</p>
             <img src="../../assets/img/MMB3.png" alt="" />
-          </div>
-          <div class="four">
-            <p>文档设置</p>
+          </router-link>
+          <router-link :to="{ path: '/home/doc/group' }" class="four">
+            <p>分组文档</p>
             <img src="../../assets/img/MMB4.png" alt="" />
-          </div>
+          </router-link>
         </div>
       </div>
       <div class="right">
@@ -251,22 +251,19 @@
       />
     </div>
 
-      <!-- 查看详细 -->
-      <el-dialog
-            title="通知内容"
-            :visible.sync="look1"
-            width="30%"
-            custom-class="el-dialog6"
-          >
-            <div class="main" v-html="details">
-            
-            </div>
-            <span slot="footer" class="dialog-footer1">
-              <el-button type="primary" @click="look1 = false">确 定</el-button>
-              <el-button @click="look1 = false">取 消</el-button>
-            </span>
-          </el-dialog>
-
+    <!-- 查看详细 -->
+    <el-dialog
+      title="通知内容"
+      :visible.sync="look1"
+      width="30%"
+      custom-class="el-dialog6"
+    >
+      <div class="main" v-html="details"></div>
+      <span slot="footer" class="dialog-footer1">
+        <el-button type="primary" @click="look1 = false">确 定</el-button>
+        <el-button @click="look1 = false">取 消</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -279,10 +276,10 @@ import { delShare1, delShare2, notice, msg } from "@/api/doc/share1";
 export default {
   data() {
     return {
-       //内容详细弹窗
-       look1: false,
-        //内容详细弹窗内容
-      details:"",
+      //内容详细弹窗
+      look1: false,
+      //内容详细弹窗内容
+      details: "",
       //中间通知列表
       notices: [],
       //中间消息列表
@@ -336,21 +333,21 @@ export default {
     this.getList();
     this.noticesList();
     this.msgList();
-    this.loginForm.username=sessionStorage.getItem("name");
+    this.loginForm.username = sessionStorage.getItem("name");
   },
   methods: {
     //通知内容更多
-    leftMores(){
+    leftMores() {
       this.$router.push("/home/page/leftmores");
     },
     //消息内容更多
-    rightMores(){
+    rightMores() {
       this.$router.push("/home/page/rightmores");
     },
-     //内容详细
-     looks(val) {
+    //内容详细
+    looks(val) {
       this.look1 = true;
-      this.details=val;
+      this.details = val;
     },
     //中间通知列表
     noticesList() {
@@ -871,6 +868,12 @@ export default {
         font-size: 0.18rem;
         color: #ffffffff;
         font-weight: 400;
+        p {
+          font-size: 0.18rem;
+          font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
+          font-weight: bold;
+          color: #ffffff;
+        }
         .one {
           position: absolute;
           display: flex;
@@ -1164,7 +1167,7 @@ export default {
   background-size: calc(100vw * (800 / 1920)) calc(100vh * (950 / 1080));
   .el-dialog__title {
     color: #ffffff;
-}
+  }
   .main {
     margin-top: calc(100vh * (40 / 1080));
     width: calc(100vw * (640 / 1920));
@@ -1188,6 +1191,4 @@ export default {
 .el-dropdown-menu__item:hover {
   background: #01d1ff3b !important;
 }
-
-
 </style>