信息公告

layouts/default.vue

@@ -35,7 +35,7 @@ html {
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+  box-sizing: none;
   margin: 0;
 }
 

pages/index/message/news.vue

 <template>
   <div>
-    <div class="message">
+    <div class="flex">
       <div class="sidebar">
-        <div class="sidebar-title">信息公告</div>
-        <el-col :span="12">
-          <el-menu
-            :default-active="activeName"
-            class="el-menu-vertical-demo"
-            @select="handleSelect"
-          >
-            <el-menu-item
-              :index="item.id + ''"
-              v-for="item in artList"
-              :key="item.id"
-              router
+          <div class="sidebar-title">信息公告</div>
+          <el-col :span="12">
+            <el-menu
+              :default-active="activeName"
+              class="el-menu-vertical-demo"
+              @select="handleSelect"
             >
-              <i class="el-icon-menu"></i>
-              <span slot="title">{{ item.title }}</span>
-            </el-menu-item>
-          </el-menu>
-        </el-col>
-      </div>
-      <ul>
-        <li
-          v-for="item in messageList"
-          :key="item.id"
-          @click="isClick(item.id)"
-          v-show="isList"
-        >
-          <!-- <nuxt-link :to="{name:'index-message-newsdetails',query:{id:(item.id)}}"  class="flex-between link-style" >-->
-          <div class="flex-between link-style">
-            <div class="t2">{{ item.title }}</div>
-            <div class="t1">发布时间：{{ item.createTime }}</div>
+              <el-menu-item
+                :index="item.id + ''"
+                v-for="item in artList"
+                :key="item.id"
+                router
+              >
+                <i class="el-icon-menu"></i>
+                <span slot="title">{{ item.title }}</span>
+              </el-menu-item>
+            </el-menu>
+          </el-col>
+        </div>
+      <div class="message">
+        <ul>
+          <li
+            v-for="item in messageList"
+            :key="item.id"
+            @click="isClick(item.id)"
+            v-show="isList"
+          >
+            <!-- <nuxt-link :to="{name:'index-message-newsdetails',query:{id:(item.id)}}"  class="flex-between link-style" >-->
+            <div class="flex-between link-style">
+              <div class="t2">{{ item.title }}</div>
+              <div class="t1">发布时间：{{ item.createTime }}</div>
+            </div>
+            <!-- </nuxt-link> -->
+          </li>
+        </ul>
+        <div class="content" v-show="!isList">
+          <div>
+            <h1>{{ detailList.title }}</h1>
+            <div class="flex-center pos">
+              <span style="margin-right: 20px"
+                >发布时间:{{ detailList.createTime }}</span
+              >
+              <span>作者:{{ detailList.author }}</span>
+            </div>
+            <div
+              v-html="detailList.content"
+              style="width: 600px; margin: 0 auto"
+            ></div>
+            <div class="flex-center" style="margin-buttom: 40px">
+              <el-button
+                type="primary"
+                @click="returnPrev"
+                style="margin-top: 50px"
+                >返回</el-button
+              >
+            </div>
           </div>
-          <!-- </nuxt-link> -->
-        </li>
-        <div class="pagination" v-show="isList">
+        </div>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="pagination" v-show="isList">
           <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
@@ -46,32 +74,7 @@
             :total="total"
           >
           </el-pagination>
-        </div>
-      </ul>
-      <div class="content" v-show="!isList">
-        <div>
-          <h1>{{ detailList.title }}</h1>
-          <div class="flex-center pos">
-            <span style="margin-right: 20px"
-              >发布时间:{{ detailList.createTime }}</span
-            >
-            <span>作者:{{ detailList.author }}</span>
-          </div>
-          <div
-            v-html="detailList.content"
-            style="width: 600px; margin: 0 auto"
-          ></div>
-          <div class="flex-center" style="margin-buttom: 40px">
-            <el-button
-              type="primary"
-              @click="returnPrev"
-              style="margin-top: 50px"
-              >返回</el-button
-            >
-          </div>
-        </div>
       </div>
-    </div>
   </div>
 </template>
 <script>
@@ -215,16 +218,15 @@ export default {
 
 <style scoped>
 .pagination {
+  flex:0 ;
   position: absolute;
-  bottom: 5%;
-  left: 50%;
+  margin-top: 20px;
+  left: 56%;
   transform: translateX(-50%);
-}
+} 
 .message {
   border: 1px solid rgba(219, 219, 219, 1);
-  min-height: 6.98rem;
-  position: absolute;
-  left:33%;
+  min-height: 6.8rem;
   width: 9.2rem;
 }
 
@@ -246,10 +248,9 @@ export default {
 }
 .sidebar {
   width: 2.4rem;
+  margin-right: .3rem;
   border: 1px solid rgba(219, 219, 219, 1);
-  position: absolute;
-  left: -30%
-}
+} 
 .sidebar > .sidebar-title {
   width: 2.4rem;
   height: 0.6rem;
@@ -259,16 +260,17 @@ export default {
   font-size: 0.2rem;
   color: rgba(0, 0, 0, 1);
   font-weight: bold;
+  /* box-sizing: none; */
 }
 .el-menu-vertical-demo {
   width: 2.4rem;
+  /* box-sizing:none */
 }
 .el-col-12 {
   width: 100%;
 }
 .content {
   width: 9.2rem;
-  height: 100%;
 }
 h1 {
   display: flex;

pages/index/notice/bid.vue

@@ -286,7 +286,6 @@ import Cookies from 'js-cookie'
   }
 .pagination{
   position: absolute;
-  /* bottom: -2%; */
   left: 50%;
   transform:translateX(-50%);
   margin-top:20px