首页 - 轮播图标题样式修改

ruoyi-ui/src/views/index.vue

@@ -2,14 +2,14 @@
   <div class="app-container home">
     <el-row :gutter="20">
       <el-col :xs="24" :sm="24" :md="12" :lg="8">
-        <el-carousel direction="horizontal" height="350px" style="margin-bottom: 20px;">
+        <el-carousel indicator-position="outside" direction="horizontal" height="350px" style="margin-bottom: 20px;">
           <!-- 为了让走马灯在轮播图片的同时能够在
           上面附带文字，将走马灯组件单独放在一个 div 里
        		并且为这个 div 单独设计 css 样式 pic_item -->
           <div class="pic_item">
             <el-carousel-item v-for="(item, index) in publicizeUrls" :key="index">
               <el-image :src="item.url" style="width: 100%; height: 100%;" @click="handleSee(item.url2)"></el-image>
-              <h3>{{item.title}}</h3>
+              <h3 style="text-align: center;">{{item.title}}</h3>
             </el-carousel-item>
           </div>
         </el-carousel>
@@ -177,7 +177,6 @@ export default {
 .el-carousel__item h3 {
   color: #475669;
   font-size: 14px;
-  opacity: 0.9;
   line-height: 150px;
   margin: 0;
   text-align: center;
@@ -223,19 +222,25 @@ img{
   /* width: 864px;
   height: 168px; */
   position: absolute;
-  left: 1rem;
-  bottom: 1rem;
+  left: 0rem;
+  bottom: 0rem;
+  width: 100%;
+  /*padding: 5px 0px;*/
+  font-size: 16px;
+  background-color: #F5222D;
+  height: 40px;
+  line-height: 40px;
+  font-weight: bold;
   color: white;
   /* text-decoration-line: underline; */
-  font-weight: 900;
   /*font-family:Georgia, 'Times New Roman', Times, serif;*/
-  font-size: 14px;
-  line-height: 116%;
-  display: flex;
-  align-items: center;
-  flex: none;
-  order: 1;
-  align-self: stretch;
+  /*line-height: 116%;*/
+  /*display: flex;*/
+  /*align-items: center;*/
+  /*flex: none;*/
+  /*order: 1;*/
+  /*align-self: stretch;*/
+  text-align: center;
 }
 
 .smallpic_item h3{