From 47b4bb2681071a66db58537b36cc66fe611b21f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=B7=83?= <2456895618@qq.com>
Date: Tue, 27 Jul 2021 16:31:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E9=A1=B5=E9=9D=A2=E5=88=9D?=
 =?UTF-8?q?=E6=AD=A5=E5=AE=8C=E6=88=90=EF=BC=8C=E8=A7=A3=E5=86=B3=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=9C=A8=E4=B8=8D=E5=90=8C=E7=94=B5=E8=84=91=E5=86=B2?=
 =?UTF-8?q?=E7=AA=81=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/{Index.vue => Layout.vue}  | 103 ++++++++++--------
 newapp/src/router/routes.js                   |   2 +-
 2 files changed, 59 insertions(+), 46 deletions(-)
 rename newapp/src/components/{Index.vue => Layout.vue} (72%)

diff --git a/newapp/src/components/Index.vue b/newapp/src/components/Layout.vue
similarity index 72%
rename from newapp/src/components/Index.vue
rename to newapp/src/components/Layout.vue
index 21e174a..8ccb7fa 100644
--- a/newapp/src/components/Index.vue
+++ b/newapp/src/components/Layout.vue
@@ -18,75 +18,77 @@
         </el-carousel>
       </el-row>
 
-      <el-container>
+      <el-container class="uu">
         <el-main>
           <div>
-            <el-card style="width: 1425px; height: 60px">
+            <el-card style="width: 100%; height:5%">
               <div class="btn">
-                <el-button style="margin-left: 200px">新闻时事</el-button>
-                <el-button style="margin-left: 200px">公司动态</el-button>
-                <el-button style="margin-left: 200px">大神风采</el-button>
-                <el-button style="margin-left: 200px">关于我们</el-button>
+                <el-button style="width:25%">新闻时事</el-button>
+                <el-button style="width:25%">公司动态</el-button>
+                <el-button style="width:25%">大神风采</el-button>
+                <el-button style="width:25%">关于我们</el-button>
               </div>
             </el-card>
           </div>
-          <div class="content">
+          <div class="content" >
             <el-card
               class=""
-              style="width: 1425px; height: 710px; margin-top: 5px"
+              style="width: 100%; height: 710px; margin-top: 20px"
             >
-              <el-card class="" style="width: 1390px; height: 250px">
+              <el-card class="" style="width: 100%; height: 270px">
                 <el-card
                   class=""
-                  style="width: 400px; height: 210px; float: left"
+                  style="width:40%; height: 226px; float: left"
                 >
-                  <img src="../assets/imagebox/1.jpg" alt="" />
+                  <img src="../assets/imagebox/1.jpg" alt="" style="height: 186px;" />
                 </el-card>
-                <el-card style="width: 900px; height: 210px; margin-left: 5px">
-                  <el-card style="width:860px;height:50px">
+                <el-card style="width: 59%; height: 100%;">
+                  <el-card style="width:100%;height:50px;text-align: center;">
                     文章标题
                   </el-card>
-                  <el-card style="width:860px;height:70px;margin-top:5px">
+                  <el-card style="width:100%;height:70px;margin-top:5px">
                     文章简介
                   </el-card>
                   <div class="num" style="margin-top:5px">
-                    <el-card style="width:150px;height:50px;float:left">点赞数量</el-card>
-                    <el-card style="width:150px;height:50px;float:left;margin-left:82px">评论数量</el-card>
-                    <el-card style="width:150px;height:50px;float:left;margin-left:82px">阅读数量</el-card>
-                    <el-card style="width:150px;height:50px;float:left;margin-left:88px">发布日期</el-card>
+                    <el-card style="width:25%;height:50px;">点赞数量</el-card>
+                    <el-card style="width:25%;height:50px;">评论数量</el-card>
+                    <el-card style="width:25%;height:50px;">阅读数量</el-card>
+                    <el-card style="width:25%;height:50px;">发布日期</el-card>
                   </div>
                 </el-card>
               </el-card>
-              <el-card class="" style="width: 1390px; height: 250px">
+
+              <el-card class="" style="width: 100%; height: 270px ;margin-top:20px">
                 <el-card
                   class=""
-                  style="width: 400px; height: 210px; float: left"
+                  style="width:40%; height:226px; float: left"
                 >
-                  <img src="../assets/imagebox/1.jpg" alt="" />
+                  <img src="../assets/imagebox/1.jpg" alt=""   style="height:186px;"/>
                 </el-card>
-                <el-card style="width: 900px; height: 210px; margin-left: 5px">
-                  <el-card style="width:860px;height:50px">
+                <el-card style="width: 59%; height: 100%;">
+                  <el-card style="width:100%;height:50px;text-align: center;">
                     文章标题
                   </el-card>
-                  <el-card style="width:860px;height:70px;margin-top:5px">
+                  <el-card style="width:100%;height:70px;margin-top:5px">
                     文章简介
                   </el-card>
                   <div class="num" style="margin-top:5px">
-                    <el-card style="width:150px;height:50px;float:left">点赞数量</el-card>
-                    <el-card style="width:150px;height:50px;float:left;margin-left:82px">评论数量</el-card>
-                    <el-card style="width:150px;height:50px;float:left;margin-left:82px">阅读数量</el-card>
-                    <el-card style="width:150px;height:50px;float:left;margin-left:88px">发布日期</el-card>
+                    <el-card style="width:25%;height:50px;">点赞数量</el-card>
+                    <el-card style="width:25%;height:50px;">评论数量</el-card>
+                    <el-card style="width:25%;height:50px;">阅读数量</el-card>
+                    <el-card style="width:25%;height:50px;">发布日期</el-card>
                   </div>
                 </el-card>
               </el-card>
+           
             </el-card>
           </div>
         </el-main>
 
         <!-- 排行 -->
-        <el-aside style="width: 400px">
-          <div>
-            <el-card class="box-card" style="width: 398px">
+        <el-aside style="width:20%">
+          <div style="padding-top:20px">
+            <el-card class="box-card" style="width: 85%;margin-left:5%">
               <div slot="header" class="clearfix">
                 <span
                   >48小时阅读排行<el-link
@@ -124,7 +126,7 @@
                 >
               </div>
             </el-card>
-            <el-card class="box-card" style="margin-top: 30px; width: 398px">
+            <el-card class="box-card" style="margin-top: 30px; width: 85%;margin-left:5%">
               <div slot="header" class="clearfix">
                 <span
                   >10天编辑推荐<el-link
@@ -162,7 +164,7 @@
                 >
               </div>
             </el-card>
-            <el-card class="box-card" style="margin-top: 30px; width: 398px">
+            <el-card class="box-card" style="margin-top: 30px; width: 85%;margin-left:5%">
               <div slot="header" class="clearfix">
                 <span
                   >10天评论排行<el-link
@@ -206,23 +208,23 @@
 
       <!-- 联系我们(二维码) -->
       <el-row class="two">
-        <el-col>
+        <el-col class="jj">
           <el-card class="code">
             <img src="../assets/imagebox/4.jpg" class="tp" />
             <div>
-              <span>扫码关注公众号</span>
+              <span style="margin-left:50px">扫码关注公众号</span>
             </div>
           </el-card>
           <el-card class="code">
             <img src="../assets/imagebox/4.jpg" class="tp" />
             <div>
-              <span>扫码加微信群</span>
+              <span style="margin-left:50px">扫码加微信群</span>
             </div>
           </el-card>
           <el-card class="code">
             <img src="../assets/imagebox/4.jpg" class="tp" />
             <div>
-              <span>扫码加QQ群</span>
+              <span style="margin-left:50px">扫码加QQ群</span>
             </div>
           </el-card>
         </el-col>
@@ -290,18 +292,19 @@ body {
   font-size: 14px;
 }
 .el-aside {
-  background-color: #d3dce6;
+  /* background-color: #d3dce6; */
   color: #333;
   /* text-align: center; */
   /* line-height: 200px; */
 }
 
 .el-main {
-  background-color: #e9eef3;
+  /* background-color: #e9eef3; */
   color: #333;
   /* text-align: center; */
   /* line-height: 160px; */
   min-height: calc(100vh - 120px);
+  min-width: calc(100vh-120px)
 }
 
 body > .el-container {
@@ -324,6 +327,7 @@ body > .el-container {
   opacity: 0.75;
   line-height: 200px;
   margin: 0;
+  
 }
 
 .el-carousel__item:nth-child(2n) {
@@ -343,21 +347,30 @@ img {
   height: 250px;
 }
 
-.two {
+.jj {
   padding-top: 10px;
   height: 270px;
+  display: flex;
+  align-items: center;
+  justify-content:space-between;
+  flex-wrap:nowrap
+  
 }
 .tp {
   width: 200px;
   height: 200px;
+  
 }
-.code {
-  float: left;
-  margin-left: 275px;
-}
+
 .num{
   display: flex;
-  align-items: center;
+  align-items: center; 
   justify-content: center;
+  text-align: center;
+  /* font-size: 3px; */
+}
+.btn{
+  display: flex;
+  align-items: center;
 }
 </style>
\ No newline at end of file
diff --git a/newapp/src/router/routes.js b/newapp/src/router/routes.js
index bcd5f06..f7404d7 100644
--- a/newapp/src/router/routes.js
+++ b/newapp/src/router/routes.js
@@ -3,7 +3,7 @@
 let routes =[
     {
         path:'/',
-        component:()=>import('../components/Index'),
+        component:()=>import('../components/Layout'),
     }
 ]
 export default routes
\ No newline at end of file
-- 
Gitee