“xubinhui 2 ani în urmă
părinte
comite
37ab142edd
1 a modificat fișierele cu 884 adăugiri și 794 ștergeri
  1. 884 794
      src/main/jmrh/src/views/home.vue

+ 884 - 794
src/main/jmrh/src/views/home.vue

@@ -7,10 +7,10 @@
                         <el-carousel class="banners" height="360px" @change="onCarouselChange">
                             <el-carousel-item v-for="item in banners" :key="item.title">
                                 <el-image
-                                    class="banner-item"
-                                    :src="item.cover"
-                                    fit="cover"
-                                    @click="$router.push({ name: 'article', query: { id: item.id } })"
+                                        class="banner-item"
+                                        :src="item.cover"
+                                        fit="cover"
+                                        @click="$router.push({ name: 'article', query: { id: item.id } })"
                                 ></el-image>
                             </el-carousel-item>
                         </el-carousel>
@@ -31,15 +31,15 @@
                             </div>
                             <div class="more" @click="$router.push({ name: 'news' })">
                                 <span>更多</span>
-                                <img src="../assets/icon_arrow_right.png" />
+                                <img src="../assets/icon_arrow_right.png"/>
                             </div>
                         </div>
                         <div class="list">
                             <div
-                                class="row"
-                                v-for="item in news"
-                                :key="item.id"
-                                @click="$router.push({ name: 'article', query: { id: item.id } })"
+                                    class="row"
+                                    v-for="item in news"
+                                    :key="item.id"
+                                    @click="$router.push({ name: 'article', query: { id: item.id } })"
                             >
                                 <div class="name">
                                     {{ item.title }}
@@ -75,41 +75,41 @@
                     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                     </el-option>
                 </el-select>
-                <input placeholder="请输入搜索内容" v-model="title" />
+                <input placeholder="请输入搜索内容" v-model="title"/>
                 <div class="btn-search" @click="goSearch">
-                    <img src="../assets/icon_search.png" />
+                    <img src="../assets/icon_search.png"/>
                 </div>
             </div>
             <!-- 北斗导航 -->
             <div class="home_ad container">
                 <div class="beidou">
-                    <img src="../assets/home_text_bd.png" class="bd" />
+                    <img src="../assets/home_text_bd.png" class="bd"/>
                     <span>导航市场北斗化,提升国家安全</span>
-                    <img src="../assets/home_img_bd02.png" class="bd02" />
+                    <img src="../assets/home_img_bd02.png" class="bd02"/>
                 </div>
                 <div class="tongh">
-                    <img src="../assets/home_text_tong.png" class="bd" />
+                    <img src="../assets/home_text_tong.png" class="bd"/>
                     <span>建立完善的通航设计与开发体系</span>
-                    <img src="../assets/home_img_t.png" class="bd02" />
+                    <img src="../assets/home_img_t.png" class="bd02"/>
                 </div>
                 <!-- <img src="../assets/home_img_beidou_bg.png" />
                 <img src="../assets/home_img_tonghang_bg.png" /> -->
             </div>
             <div class="home_card container">
                 <div class="card_item">
-                    <img src="../assets/card01.png" />
+                    <img src="../assets/card01.png"/>
                     <p>军民融合需求</p>
-                    <span @click="goTab1">立即查看 <img src="../assets/card_right.png" /> </span>
+                    <span @click="goTab1">立即查看 <img src="../assets/card_right.png"/> </span>
                 </div>
                 <div class="card_item">
-                    <img src="../assets/card02.png" alt="" />
+                    <img src="../assets/card02.png" alt=""/>
                     <p>技术产品大厅</p>
-                    <span @click="goTab2">立即查看 <img src="../assets/card_right.png" /> </span>
+                    <span @click="goTab2">立即查看 <img src="../assets/card_right.png"/> </span>
                 </div>
                 <div class="card_item">
-                    <img src="../assets/card03.png" alt="" />
+                    <img src="../assets/card03.png" alt=""/>
                     <p>共享资源空间</p>
-                    <span @click="goTab3">立即查看 <img src="../assets/card_right.png" /> </span>
+                    <span @click="goTab3">立即查看 <img src="../assets/card_right.png"/> </span>
                 </div>
             </div>
         </div>
@@ -124,8 +124,8 @@
                         技术发布
                     </div>
                     <div
-                        class="publish_more"
-                        @click="
+                            class="publish_more"
+                            @click="
                             $router.push({
                                 name: 'resource',
                                 query: {
@@ -135,7 +135,7 @@
                         "
                     >
                         <span>MORE</span>
-                        <img src="../assets/icon_arrow_right.png" />
+                        <img src="../assets/icon_arrow_right.png"/>
                     </div>
                 </div>
                 <div class="pub_left_content">
@@ -144,16 +144,16 @@
                             <li @click="changeStatus(index)" v-for="(n, index) in productList" :key="n.id">
                                 <!-- :class="{ block: index == num }" -->
                                 <div
-                                    class="li_active "
-                                    v-show="index == num"
-                                    @click="
+                                        class="li_active "
+                                        v-show="index == num"
+                                        @click="
                                         $router.push({
                                             name: 'resourceRelease',
                                             query: { id: n.id, type: 'PRODUCT_SUPPLY' }
                                         })
                                     "
                                 >
-                                    <img :src="n.images[0]" />
+                                    <img :src="n.images[0]"/>
                                     <div style="width:500px;float:left">
                                         <h5>
                                             {{ n.name }}
@@ -162,16 +162,16 @@
                                             {{ n.description }}
                                         </p>
                                     </div>
-                                    <span class="pub_time">{{ n.createdAt }}</span>
+                                    <!--                                    <span class="pub_time">{{ n.createdAt }}</span>-->
                                 </div>
                                 <div class="li_show " v-show="index != num">
                                     <div>
-                                        <img :src="n.images[0]" />
+                                        <img :src="n.images[0]"/>
                                         <span class="pub_span">
                                             {{ n.name }}
                                         </span>
                                     </div>
-                                    <span class="pub_time">{{ n.createdAt }}</span>
+                                    <!--                                    <span class="pub_time">{{ n.createdAt }}</span>-->
                                 </div>
                             </li>
                         </div>
@@ -179,16 +179,16 @@
                             <li @click="changeStatus(index)" v-for="(n, index) in artProductList" :key="n.id">
                                 <!-- :class="{ block: index == num }" -->
                                 <div
-                                    class="li_active "
-                                    v-show="index == num"
-                                    @click="
+                                        class="li_active "
+                                        v-show="index == num"
+                                        @click="
                                         $router.push({
                                             name: 'resourceRelease',
                                             query: { id: n.id, type: 'TECH_SUPPLY' }
                                         })
                                     "
                                 >
-                                    <img :src="n.images[0]" />
+                                    <img :src="n.images[0]"/>
                                     <div style="width:500px;float:left">
                                         <h5>
                                             {{ n.name }}
@@ -201,7 +201,7 @@
                                 </div>
                                 <div class="li_show " v-show="index != num">
                                     <div>
-                                        <img :src="n.images[0]" />
+                                        <img :src="n.images[0]"/>
                                         <span class="pub_span">
                                             {{ n.name }}
                                         </span>
@@ -216,10 +216,10 @@
             <div class="publish_right">
                 <div class="pub_r_top">
                     <div @click="releaseSupplyGo">
-                        <img src="../assets/home_icon_fachanpin.png" /><span>发产品</span>
+                        <img src="../assets/home_icon_fachanpin.png"/><span>发产品</span>
                     </div>
                     <div @click="releaseRequierGo">
-                        <img src="../assets/home_icon_fajishu.png" /><span>发技术</span>
+                        <img src="../assets/home_icon_fajishu.png"/><span>发技术</span>
                     </div>
                 </div>
                 <div class="pub_r_bottom">
@@ -242,8 +242,8 @@
                         技术需求
                     </div>
                     <div
-                        class="publish_more"
-                        @click="
+                            class="publish_more"
+                            @click="
                             $router.push({
                                 name: 'resource',
                                 query: {
@@ -253,15 +253,15 @@
                         "
                     >
                         <span>MORE</span>
-                        <img src="../assets/icon_arrow_right.png" />
+                        <img src="../assets/icon_arrow_right.png"/>
                     </div>
                 </div>
                 <div v-if="publishTab1 === 0">
                     <div
-                        class="pub_left_content needs_con"
-                        v-for="item in productNeedList"
-                        :key="item.id"
-                        @click="
+                            class="pub_left_content needs_con"
+                            v-for="item in productNeedList"
+                            :key="item.id"
+                            @click="
                             $router.push({ name: 'resourceDetail', query: { id: item.id, type: 'PRODUCT_DEMAND' } })
                         "
                     >
@@ -273,10 +273,10 @@
                 </div>
                 <div v-else>
                     <div
-                        class="pub_left_content needs_con"
-                        v-for="item in list"
-                        :key="item.id"
-                        @click="$router.push({ name: 'resourceDetail', query: { id: item.id, type: 'TECH_DEMAND' } })"
+                            class="pub_left_content needs_con"
+                            v-for="item in list"
+                            :key="item.id"
+                            @click="$router.push({ name: 'resourceDetail', query: { id: item.id, type: 'TECH_DEMAND' } })"
                     >
                         <div class="pub_tit ">
                             <span>{{ item.name }} </span>
@@ -288,10 +288,10 @@
             <div class="publish_right">
                 <div class="pub_r_top needs">
                     <div @click="$router.push({ name: 'resource', query: { myTab: 3 } })">
-                        <img src="../assets/home_icon_zhaochanpin.png" alt="" /><span>找产品</span>
+                        <img src="../assets/home_icon_zhaochanpin.png" alt=""/><span>找产品</span>
                     </div>
                     <div @click="$router.push({ name: 'resource', query: { myTab: 4 } })">
-                        <img src="../assets/home_icon_zhaojishu.png" alt="" /><span>找技术</span>
+                        <img src="../assets/home_icon_zhaojishu.png" alt=""/><span>找技术</span>
                     </div>
                 </div>
                 <div class="pub_r_bottom">
@@ -310,33 +310,33 @@
                     <div class="res_title">资源共享</div>
                     <div class="res_more" @click="goTab3">
                         <span>MORE</span>
-                        <img src="../assets/icon_arrow_right.png" />
+                        <img src="../assets/icon_arrow_right.png"/>
                     </div>
                 </div>
                 <div class="res_bottom">
                     <div
-                        class="res_img"
-                        @click="$router.push({ name: 'resource', query: { myTab: 5, tabId: '实验设备' } })"
+                            class="res_img"
+                            @click="$router.push({ name: 'resource', query: { myTab: 5, tabId: '实验设备' } })"
                     >
-                        <img src="../assets/home_img_ziyuan_shiyanshebei.png" />
+                        <img src="../assets/home_img_ziyuan_shiyanshebei.png"/>
                         <p>实验设备</p>
                     </div>
                     <div
-                        class="res_img"
-                        @click="$router.push({ name: 'resource', query: { myTab: 5, tabId: '计量器具' } })"
+                            class="res_img"
+                            @click="$router.push({ name: 'resource', query: { myTab: 5, tabId: '计量器具' } })"
                     >
-                        <img src="../assets/home_img_ziyuan_jiliang.png" />
+                        <img src="../assets/home_img_ziyuan_jiliang.png"/>
                         <p>计量器具</p>
                     </div>
                     <div
-                        class="res_img"
-                        @click="$router.push({ name: 'resource', query: { myTab: 5, tabId: '科研仪器' } })"
+                            class="res_img"
+                            @click="$router.push({ name: 'resource', query: { myTab: 5, tabId: '科研仪器' } })"
                     >
-                        <img src="../assets/home_img_ziyuan_keyan.png" />
+                        <img src="../assets/home_img_ziyuan_keyan.png"/>
                         <p>科研仪器</p>
                     </div>
                     <div class="res_img" @click="$router.push({ name: 'resource', query: { myTab: 5 } })">
-                        <img src="../assets/home_img_ziyuan_gengduo.png" />
+                        <img src="../assets/home_img_ziyuan_gengduo.png"/>
                         <p>更多</p>
                     </div>
                 </div>
@@ -347,26 +347,26 @@
                     <div class="res_title">融资需求</div>
                     <div class="res_more " @click="$router.push({ name: 'resource', query: { myTab: 2 } })">
                         <span>MORE</span>
-                        <img src="../assets/icon_arrow_right.png" />
+                        <img src="../assets/icon_arrow_right.png"/>
                     </div>
                 </div>
                 <div class="res_bottom">
                     <div
-                        class="res_img"
-                        @click="$router.push({ name: 'resource', query: { myTab: 2, tabId: '债务融资' } })"
+                            class="res_img"
+                            @click="$router.push({ name: 'resource', query: { myTab: 2, tabId: '债务融资' } })"
                     >
-                        <img src="../assets/home_img_rongzi_zhaiwu.png" />
+                        <img src="../assets/home_img_rongzi_zhaiwu.png"/>
                         <p>债务融资</p>
                     </div>
                     <div
-                        class="res_img"
-                        @click="$router.push({ name: 'resource', query: { myTab: 2, tabId: '权益融资' } })"
+                            class="res_img"
+                            @click="$router.push({ name: 'resource', query: { myTab: 2, tabId: '权益融资' } })"
                     >
-                        <img src="../assets/home_img_rongzi_quanyi.png" />
+                        <img src="../assets/home_img_rongzi_quanyi.png"/>
                         <p>权益融资</p>
                     </div>
                     <div class="res_img" @click="$router.push({ name: 'resource', query: { myTab: 2 } })">
-                        <img src="../assets/home_img_rongzi_gengduo.png" />
+                        <img src="../assets/home_img_rongzi_gengduo.png"/>
                         <p>更多</p>
                     </div>
                 </div>
@@ -377,837 +377,927 @@
 </template>
 
 <script>
-import announcement from '../components/announcement';
-export default {
-    name: 'home',
-    components: { announcement },
-    data() {
-        return {
-            banners: [],
-            bannerIndex: 0,
-            tab: '热点推荐',
-            news: [],
-            top: null,
-            publishTab: 0,
-            publishTab1: 0,
-            productNeedList: {},
-            list: {},
-            productCountList: [],
-            NeedCountList: [],
-            productList: [],
-            artProductList: [],
-            title: '',
-            options: [
-                {
-                    label: '技术需求',
-                    value: 2
-                },
-                {
-                    label: '产品需求',
-                    value: 3
-                },
-                {
-                    label: '融资需求',
-                    value: 4
-                },
-                {
-                    label: '产品发布',
-                    value: 5
-                },
-                {
-                    label: '技术发布',
-                    value: 6
-                },
-                {
-                    label: '资源共享',
-                    value: 7
-                }
-            ],
-            value: '',
-            num: 0
-        };
-    },
-    computed: {
-        userInfo() {
-            return this.$store.state.userInfo;
-        }
-    },
-    created() {
-        this.$http
-            .get('/article/all', { query: { mainType: '首页置顶', status: 'PASS' }, size: 1, sort: 'createdAt,desc' })
-            .then(res => {
-                if (res.content[0]) {
-                    var tmp = document.createElement('DIV');
-                    tmp.innerHTML = res.content[0].content;
-                    res.content[0].bref = (tmp.textContent || tmp.innerText || '').trim();
-                    this.top = res.content[0];
-                }
-            });
-        this.$http
-            .get('/article/all', { query: { mainType: '首页轮播', status: 'PASS' }, sort: 'createdAt,desc' })
-            .then(res => {
-                this.banners = res.content;
-            });
+    import announcement from '../components/announcement';
 
-        this.$http.post('/artNeed/count').then(res => {
-            this.NeedCountList = res;
-        });
-        this.getNews();
-        // 产品发布
-        this.$http
-            .get('/resourceSupplyAndDemand/all', {
-                size: 5,
-                query: { type: 'PRODUCT_SUPPLY', status: 'PASS' },
-                sort: 'createdAt,desc'
-            })
-            .then(res => {
-                this.productList = res.content;
-            });
-        // 技术发布
-        this.$http
-            .get('/resourceSupplyAndDemand/all', {
-                size: 5,
-                query: { type: 'TECH_SUPPLY', status: 'PASS' },
-                sort: 'createdAt,desc'
-            })
-            .then(res => {
-                this.artProductList = res.content;
-            });
-        // 产品需求
-        this.$http
-            .get('/resourceSupplyAndDemand/all', {
-                size: 8,
-                query: { type: 'PRODUCT_DEMAND', status: 'PASS' },
-                sort: 'createdAt,desc'
-            })
-            .then(res => {
-                this.productNeedList = res.content;
-            });
-        // 技术需求
-        this.$http
-            .get('/resourceSupplyAndDemand/all', {
-                size: 8,
-                query: { type: 'TECH_DEMAND', status: 'PASS' },
-                sort: 'createdAt,desc'
-            })
-            .then(res => {
-                this.list = res.content;
-            });
-        // 产品发布条数
-        this.$http
-            .get('/resourceSupplyAndDemand/getDataCount', {
-                productType: 'PRODUCT_SUPPLY',
-                techType: 'TECH_SUPPLY'
-            })
-            .then(res => {
-                this.productCountList = res;
-            });
-        // 产品需求条数
-        this.$http
-            .get('/resourceSupplyAndDemand/getDataCount', {
-                productType: 'PRODUCT_DEMAND',
-                techType: 'TECH_DEMAND'
-            })
-            .then(res => {
-                this.NeedCountList = res;
-            });
-    },
-    methods: {
-        // policyAll() {
-        //     this.$refs.my.policyAll(this.title);
-        // },
-        onCarouselChange(e) {
-            this.bannerIndex = e;
+    export default {
+        name: 'home',
+        components: {announcement},
+        data() {
+            return {
+                banners: [],
+                bannerIndex: 0,
+                tab: '热点推荐',
+                news: [],
+                top: null,
+                publishTab: 0,
+                publishTab1: 0,
+                productNeedList: {},
+                list: {},
+                productCountList: [],
+                NeedCountList: [],
+                productList: [],
+                artProductList: [],
+                title: '',
+                options: [
+                    {
+                        label: '技术需求',
+                        value: 2
+                    },
+                    {
+                        label: '产品需求',
+                        value: 3
+                    },
+                    {
+                        label: '融资需求',
+                        value: 4
+                    },
+                    {
+                        label: '产品发布',
+                        value: 5
+                    },
+                    {
+                        label: '技术发布',
+                        value: 6
+                    },
+                    {
+                        label: '资源共享',
+                        value: 7
+                    }
+                ],
+                value: '',
+                num: 0
+            };
         },
-        getNews() {
+        computed: {
+            userInfo() {
+                return this.$store.state.userInfo;
+            }
+        },
+        created() {
             this.$http
-                .get('/article/all', { query: { mainType: this.tab, status: 'PASS' }, size: 7, sort: 'createdAt,desc' })
+                .get('/article/all', {query: {mainType: '首页置顶', status: 'PASS'}, size: 1, sort: 'createdAt,desc'})
                 .then(res => {
-                    this.news = res.content;
+                    if (res.content[0]) {
+                        var tmp = document.createElement('DIV');
+                        tmp.innerHTML = res.content[0].content;
+                        res.content[0].bref = (tmp.textContent || tmp.innerText || '').trim();
+                        this.top = res.content[0];
+                    }
                 });
-        },
-        goTab1() {
-            this.$router.push({
-                name: 'resource',
-                query: {
-                    myTab: 0
-                }
-            });
-        },
-        goTab2() {
-            this.$router.push({
-                name: 'resource',
-                query: {
-                    myTab: 3
-                }
-            });
-        },
-        goTab3() {
-            this.$router.push({
-                name: 'resource',
-                query: {
-                    myTab: 5
-                }
+            this.$http
+                .get('/article/all', {query: {mainType: '首页轮播', status: 'PASS'}, sort: 'createdAt,desc'})
+                .then(res => {
+                    this.banners = res.content;
+                });
+
+            this.$http.post('/artNeed/count').then(res => {
+                this.NeedCountList = res;
             });
+            this.getNews();
+            // 产品发布
+            this.$http
+                .get('/resourceSupplyAndDemand/all', {
+                    size: 5,
+                    query: {type: 'PRODUCT_SUPPLY', status: 'PASS'},
+                    sort: 'createdAt,desc'
+                })
+                .then(res => {
+                    this.productList = res.content;
+                });
+            // 技术发布
+            this.$http
+                .get('/resourceSupplyAndDemand/all', {
+                    size: 5,
+                    query: {type: 'TECH_SUPPLY', status: 'PASS'},
+                    sort: 'createdAt,desc'
+                })
+                .then(res => {
+                    this.artProductList = res.content;
+                });
+            // 产品需求
+            this.$http
+                .get('/resourceSupplyAndDemand/all', {
+                    size: 8,
+                    query: {type: 'PRODUCT_DEMAND', status: 'PASS'},
+                    sort: 'createdAt,desc'
+                })
+                .then(res => {
+                    this.productNeedList = res.content;
+                });
+            // 技术需求
+            this.$http
+                .get('/resourceSupplyAndDemand/all', {
+                    size: 8,
+                    query: {type: 'TECH_DEMAND', status: 'PASS'},
+                    sort: 'createdAt,desc'
+                })
+                .then(res => {
+                    this.list = res.content;
+                });
+            // 产品发布条数
+            this.$http
+                .get('/resourceSupplyAndDemand/getDataCount', {
+                    productType: 'PRODUCT_SUPPLY',
+                    techType: 'TECH_SUPPLY'
+                })
+                .then(res => {
+                    this.productCountList = res;
+                });
+            // 产品需求条数
+            this.$http
+                .get('/resourceSupplyAndDemand/getDataCount', {
+                    productType: 'PRODUCT_DEMAND',
+                    techType: 'TECH_DEMAND'
+                })
+                .then(res => {
+                    this.NeedCountList = res;
+                });
         },
-        changeStatus(index) {
-            this.num = index;
-        },
-        goSearch() {
-            this.$nextTick(() => {
-                setTimeout(() => {
-                    this.$router.push({
-                        name: 'search',
-                        params: {
-                            search: this.title,
-                            value: this.value
-                        }
+        methods: {
+            // policyAll() {
+            //     this.$refs.my.policyAll(this.title);
+            // },
+            onCarouselChange(e) {
+                this.bannerIndex = e;
+            },
+            getNews() {
+                this.$http
+                    .get('/article/all', {query: {mainType: this.tab, status: 'PASS'}, size: 7, sort: 'createdAt,desc'})
+                    .then(res => {
+                        this.news = res.content;
                     });
-                }, 100);
-            });
-        },
-        releaseSupplyGo() {
-            if (this.$store.state.userInfo) {
-                this.$router.push({ name: 'releaseSupply' });
-            } else {
-                this.$alert('用户未登录,请先进行登录?', '提示', {
-                    confirmButtonText: '确定',
-                    type: 'warning'
+            },
+            goTab1() {
+                this.$router.push({
+                    name: 'resource',
+                    query: {
+                        myTab: 0
+                    }
                 });
+            },
+            goTab2() {
+                this.$router.push({
+                    name: 'resource',
+                    query: {
+                        myTab: 3
+                    }
+                });
+            },
+            goTab3() {
+                this.$router.push({
+                    name: 'resource',
+                    query: {
+                        myTab: 5
+                    }
+                });
+            },
+            changeStatus(index) {
+                this.num = index;
+            },
+            goSearch() {
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        this.$router.push({
+                            name: 'search',
+                            params: {
+                                search: this.title,
+                                value: this.value
+                            }
+                        });
+                    }, 100);
+                });
+            },
+            releaseSupplyGo() {
+                if (this.$store.state.userInfo) {
+                    this.$router.push({name: 'releaseSupply'});
+                } else {
+                    this.$alert('用户未登录,请先进行登录?', '提示', {
+                        confirmButtonText: '确定',
+                        type: 'warning'
+                    });
+                }
+            },
+            releaseRequierGo() {
+                if (this.$store.state.userInfo) {
+                    this.$router.push({name: 'releaseRequirement'});
+                } else {
+                    this.$alert('用户未登录,请先进行登录?', '提示', {
+                        confirmButtonText: '确定',
+                        type: 'warning'
+                    });
+                }
             }
         },
-        releaseRequierGo() {
-            if (this.$store.state.userInfo) {
-                this.$router.push({ name: 'releaseRequirement' });
-            } else {
-                this.$alert('用户未登录,请先进行登录?', '提示', {
-                    confirmButtonText: '确定',
-                    type: 'warning'
-                });
+        watch: {
+            tab() {
+                this.getNews();
             }
         }
-    },
-    watch: {
-        tab() {
-            this.getNews();
-        }
-    }
-};
+    };
 </script>
 <style lang="less" scoped>
-.container {
-    width: 1200px;
-    margin: 0 auto;
-}
-.top_sw {
-    box-sizing: border-box;
-    .el-col {
-        width: 590px;
+    .container {
+        width: 1200px;
+        margin: 0 auto;
     }
-    .el-col + .el-col {
-        margin-left: 20px;
+
+    .top_sw {
+        box-sizing: border-box;
+
+        .el-col {
+            width: 590px;
+        }
+
+        .el-col + .el-col {
+            margin-left: 20px;
+        }
     }
-}
-.banners {
-    height: 360px;
-    .banner-item {
-        width: 100%;
+
+    .banners {
         height: 360px;
+
+        .banner-item {
+            width: 100%;
+            height: 360px;
+        }
     }
-}
-.pagination {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: 36px;
-    line-height: 36px;
-    color: white;
-    font-size: 14px;
-    background: rgba(0, 0, 0, 0.24);
-    padding: 0 12px;
-    z-index: 2;
-    .ellipsis();
-}
-.news-container {
-    height: 360px;
-    padding: 14px;
-    padding-top: 6px;
-    box-sizing: border-box;
-    background: white;
-    .title {
-        color: @prim;
-        font-size: 19px;
-        font-weight: bold;
-        text-align: center;
+
+    .pagination {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 36px;
+        line-height: 36px;
+        color: white;
+        font-size: 14px;
+        background: rgba(0, 0, 0, 0.24);
+        padding: 0 12px;
+        z-index: 2;
         .ellipsis();
-        cursor: pointer;
     }
-    .content {
-        color: @text3;
-        font-weight: 400;
-        line-height: 24px;
-        .ellipsisLn(3);
-        margin-top: 10px;
-        cursor: pointer;
-    }
-    .tabs {
-        border-bottom: 1px solid @border;
-        // margin-top: 14px;
-        position: relative;
-        .tab {
-            display: inline-block;
-            // width: 102px;
-            margin-right: 32px;
-            height: 44px;
-            line-height: 44px;
-            color: black;
-            font-size: 16px;
+
+    .news-container {
+        height: 360px;
+        padding: 14px;
+        padding-top: 6px;
+        box-sizing: border-box;
+        background: white;
+
+        .title {
+            color: @prim;
+            font-size: 19px;
             font-weight: bold;
+            text-align: center;
+            .ellipsis();
             cursor: pointer;
-            &.active {
-                color: #bf1616;
-                border-bottom: #bf1616 2px solid;
-            }
         }
-        .more {
+
+        .content {
             color: @text3;
-            font-size: 13px;
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            height: 44px;
-            line-height: 44px;
+            font-weight: 400;
+            line-height: 24px;
+            .ellipsisLn(3);
+            margin-top: 10px;
             cursor: pointer;
-            > * {
-                vertical-align: middle;
-                display: inline-block;
-            }
-            img {
-                width: 16px;
-                height: 16px;
-                margin-left: 2px;
-            }
         }
-    }
-    .list {
-        padding: 10px 0;
-        .row {
-            height: 40px;
-            .flex();
-            font-size: 14px;
-            padding-left: 12px;
+
+        .tabs {
+            border-bottom: 1px solid @border;
+            // margin-top: 14px;
             position: relative;
-            cursor: pointer;
-            .name {
+
+            .tab {
+                display: inline-block;
+                // width: 102px;
+                margin-right: 32px;
+                height: 44px;
+                line-height: 44px;
                 color: black;
-                flex-basis: 0;
-                flex-grow: 1;
-                margin-right: 14px;
-                .ellipsis();
+                font-size: 16px;
+                font-weight: bold;
+                cursor: pointer;
+
+                &.active {
+                    color: #bf1616;
+                    border-bottom: #bf1616 2px solid;
+                }
             }
-            .time {
+
+            .more {
                 color: @text3;
-            }
-            &::after {
-                content: '';
-                width: 4px;
-                height: 4px;
+                font-size: 13px;
                 position: absolute;
-                left: 0;
                 top: 0;
+                right: 0;
                 bottom: 0;
-                margin: auto;
-                border-radius: 2px;
-                background: @border;
+                height: 44px;
+                line-height: 44px;
+                cursor: pointer;
+
+                > * {
+                    vertical-align: middle;
+                    display: inline-block;
+                }
+
+                img {
+                    width: 16px;
+                    height: 16px;
+                    margin-left: 2px;
+                }
             }
         }
-    }
-}
-.card {
-    background: white;
-    .title-img {
-        width: 380px;
-        height: 138px;
-    }
-    .list {
-        padding: 12px 10px;
-        .row {
-            height: 40px;
-            .flex();
-            font-size: 14px;
-            padding-left: 12px;
-            position: relative;
-            cursor: pointer;
-            .name {
-                color: black;
-                flex-basis: 0;
-                flex-grow: 1;
-                margin-right: 14px;
-                .ellipsis();
-            }
-            .time {
-                color: @text3;
+
+        .list {
+            padding: 10px 0;
+
+            .row {
+                height: 40px;
+                .flex();
+                font-size: 14px;
+                padding-left: 12px;
+                position: relative;
+                cursor: pointer;
+
+                .name {
+                    color: black;
+                    flex-basis: 0;
+                    flex-grow: 1;
+                    margin-right: 14px;
+                    .ellipsis();
+                }
+
+                .time {
+                    color: @text3;
+                }
+
+                &::after {
+                    content: '';
+                    width: 4px;
+                    height: 4px;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    margin: auto;
+                    border-radius: 2px;
+                    background: @border;
+                }
             }
-            &::after {
-                content: '';
-                width: 4px;
-                height: 4px;
-                position: absolute;
-                left: 0;
-                top: 0;
-                bottom: 0;
-                margin: auto;
-                border-radius: 2px;
-                background: @border;
+        }
+    }
+
+    .card {
+        background: white;
+
+        .title-img {
+            width: 380px;
+            height: 138px;
+        }
+
+        .list {
+            padding: 12px 10px;
+
+            .row {
+                height: 40px;
+                .flex();
+                font-size: 14px;
+                padding-left: 12px;
+                position: relative;
+                cursor: pointer;
+
+                .name {
+                    color: black;
+                    flex-basis: 0;
+                    flex-grow: 1;
+                    margin-right: 14px;
+                    .ellipsis();
+                }
+
+                .time {
+                    color: @text3;
+                }
+
+                &::after {
+                    content: '';
+                    width: 4px;
+                    height: 4px;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    margin: auto;
+                    border-radius: 2px;
+                    background: @border;
+                }
             }
         }
     }
-}
-// .notice {
-//     padding: 40px 0 22px;
-//     height: 17px;
-//     line-height: 17px;
-//     span {
-//         font-size: 13px;
-//         font-family: MicrosoftYaHei;
-//         color: #bf1616;
-//         margin-right: 13px;
-//     }
-//     .el-link {
-//         font-size: 13px;
-//         font-family: PingFangSC-Regular, PingFang SC;
-//         font-weight: 400;
-//         color: #7a7c80;
-//     }
-//     .el-link + .el-link {
-//         margin-left: 30px;
-//     }
-// }
-
-.home_search {
-    margin: 0 auto;
-    // margin-top: 60px;
-    background-color: #fff;
-    border: 1px solid #bf1616;
-    box-sizing: border-box;
-    display: flex;
-    width: 644px;
-    height: 48px;
-    .el-dropdown {
-        width: 120px;
-        // height: 48px;
-        line-height: 48px;
-        padding: 0 12px;
+
+    // .notice {
+    //     padding: 40px 0 22px;
+    //     height: 17px;
+    //     line-height: 17px;
+    //     span {
+    //         font-size: 13px;
+    //         font-family: MicrosoftYaHei;
+    //         color: #bf1616;
+    //         margin-right: 13px;
+    //     }
+    //     .el-link {
+    //         font-size: 13px;
+    //         font-family: PingFangSC-Regular, PingFang SC;
+    //         font-weight: 400;
+    //         color: #7a7c80;
+    //     }
+    //     .el-link + .el-link {
+    //         margin-left: 30px;
+    //     }
+    // }
+
+    .home_search {
+        margin: 0 auto;
+        // margin-top: 60px;
+        background-color: #fff;
+        border: 1px solid #bf1616;
         box-sizing: border-box;
-        border-right: 1px #bf1616 solid;
-        .el-dropdown-link {
+        display: flex;
+        width: 644px;
+        height: 48px;
+
+        .el-dropdown {
+            width: 120px;
+            // height: 48px;
+            line-height: 48px;
+            padding: 0 12px;
+            box-sizing: border-box;
+            border-right: 1px #bf1616 solid;
+
+            .el-dropdown-link {
+                font-size: 14px;
+                font-weight: 400;
+                color: #626366;
+
+                img {
+                    width: 16px;
+                    height: 16px;
+                    float: right;
+                    margin-top: 16px;
+                }
+            }
+
+            .el-dropdown-item {
+                width: 120px;
+            }
+        }
+
+        input {
+            width: 450px;
+            // height: 48px;
+            background: #ffffff;
+            padding: 0 0 0 20px;
             font-size: 14px;
             font-weight: 400;
-            color: #626366;
+            border-left: 1px solid #bf1616;
+        }
+
+        .btn-search {
+            width: 75px;
+            height: 48px;
+            background: #bf1616;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+
             img {
-                width: 16px;
-                height: 16px;
-                float: right;
-                margin-top: 16px;
+                width: 24px;
+                height: 24px;
             }
         }
-        .el-dropdown-item {
+
+        /deep/ .el-input--small .el-input__inner {
+            height: 46px;
+            line-height: 46px;
+            border: none;
+            text-align: center;
             width: 120px;
         }
-    }
-    input {
-        width: 450px;
-        // height: 48px;
-        background: #ffffff;
-        padding: 0 0 0 20px;
-        font-size: 14px;
-        font-weight: 400;
-        border-left: 1px solid #bf1616;
-    }
-    .btn-search {
-        width: 75px;
-        height: 48px;
-        background: #bf1616;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        img {
-            width: 24px;
-            height: 24px;
+
+        .el-select-dropdown__item {
+            text-align: center;
         }
     }
-    /deep/.el-input--small .el-input__inner {
-        height: 46px;
-        line-height: 46px;
-        border: none;
-        text-align: center;
-        width: 120px;
-    }
-    .el-select-dropdown__item {
-        text-align: center;
-    }
-}
-.home_ad {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 40px;
-    margin-bottom: 20px;
-
-    .beidou {
-        width: 590px;
-        height: 160px;
-        background: url('../assets/home_img_beidou_bg.png');
-        position: relative;
-        .bd {
-            width: 248px;
-            height: 30px;
-            position: absolute;
-            top: 50px;
-            left: 30px;
-        }
-        .bd02 {
-            width: 230px;
+
+    .home_ad {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 40px;
+        margin-bottom: 20px;
+
+        .beidou {
+            width: 590px;
             height: 160px;
-            position: absolute;
-            top: 0;
-            right: 0;
-        }
-        span {
-            font-size: 14px;
-            color: #ffffff;
-            position: absolute;
-            left: 30px;
-            bottom: 42px;
-        }
-    }
-    .tongh {
-        width: 590px;
-        height: 160px;
-        background: url('../assets/home_img_tonghang_bg.png');
-        position: relative;
-        .bd {
-            width: 248px;
-            height: 30px;
-            position: absolute;
-            top: 50px;
-            left: 30px;
+            background: url('../assets/home_img_beidou_bg.png');
+            position: relative;
+
+            .bd {
+                width: 248px;
+                height: 30px;
+                position: absolute;
+                top: 50px;
+                left: 30px;
+            }
+
+            .bd02 {
+                width: 230px;
+                height: 160px;
+                position: absolute;
+                top: 0;
+                right: 0;
+            }
+
+            span {
+                font-size: 14px;
+                color: #ffffff;
+                position: absolute;
+                left: 30px;
+                bottom: 42px;
+            }
         }
-        .bd02 {
-            width: 300px;
+
+        .tongh {
+            width: 590px;
             height: 160px;
-            position: absolute;
-            top: 0;
-            right: 0;
-        }
-        span {
-            font-size: 14px;
-            color: #ffffff;
-            position: absolute;
-            left: 30px;
-            bottom: 42px;
+            background: url('../assets/home_img_tonghang_bg.png');
+            position: relative;
+
+            .bd {
+                width: 248px;
+                height: 30px;
+                position: absolute;
+                top: 50px;
+                left: 30px;
+            }
+
+            .bd02 {
+                width: 300px;
+                height: 160px;
+                position: absolute;
+                top: 0;
+                right: 0;
+            }
+
+            span {
+                font-size: 14px;
+                color: #ffffff;
+                position: absolute;
+                left: 30px;
+                bottom: 42px;
+            }
         }
     }
-}
-.home_card {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 40px;
-    .card_item {
-        text-align: center;
-        width: 387px;
-        height: 240px;
-        background: #ffffff;
-        > img {
+
+    .home_card {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 40px;
+
+        .card_item {
+            text-align: center;
             width: 387px;
-            height: 120px;
+            height: 240px;
+            background: #ffffff;
+
+            > img {
+                width: 387px;
+                height: 120px;
+            }
+
+            p {
+                font-size: 20px;
+                font-weight: bold;
+                color: #313233;
+            }
+
+            span {
+                font-size: 14px;
+                font-weight: 400;
+                color: #bf1616;
+                cursor: pointer;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                img {
+                    width: 16px;
+                    height: 16px;
+                }
+            }
         }
-        p {
-            font-size: 20px;
-            font-weight: bold;
-            color: #313233;
+    }
+
+    .publish {
+        display: flex;
+        height: auto;
+        margin-bottom: 40px;
+        display: flex;
+        justify-content: space-between;
+
+        .publish_left {
+            box-sizing: border-box;
+            width: 793px;
+            height: 381px;
+            padding: 30px 20px 0;
+            background-color: #fff;
         }
-        span {
-            font-size: 14px;
-            font-weight: 400;
-            color: #bf1616;
+
+        .pub_left_title {
+            border-bottom: solid 1px #f2f3f5;
+            padding: 12px 0;
+            margin-bottom: 20px;
+        }
+
+        .publish_tab {
+            display: inline;
             cursor: pointer;
+            padding: 12px 0;
+            margin-right: 24px;
+
+            &.active {
+                font-size: 18px;
+                font-weight: 700;
+                color: #bf1616;
+                border-bottom: #bf1616 solid 2px;
+            }
+        }
+
+        .publish_more {
+            display: inline;
+            cursor: pointer;
+            color: #7a7c80;
+            font-size: 14px;
+            float: right;
             display: flex;
             justify-content: center;
-            align-items: center;
+
             img {
                 width: 16px;
                 height: 16px;
             }
         }
-    }
-}
-.publish {
-    display: flex;
-    height: auto;
-    margin-bottom: 40px;
-    display: flex;
-    justify-content: space-between;
-    .publish_left {
-        box-sizing: border-box;
-        width: 793px;
-        height: 381px;
-        padding: 30px 20px 0;
-        background-color: #fff;
-    }
-    .pub_left_title {
-        border-bottom: solid 1px #f2f3f5;
-        padding: 12px 0;
-        margin-bottom: 20px;
-    }
-    .publish_tab {
-        display: inline;
-        cursor: pointer;
-        padding: 12px 0;
-        margin-right: 24px;
-        &.active {
-            font-size: 18px;
-            font-weight: 700;
-            color: #bf1616;
-            border-bottom: #bf1616 solid 2px;
-        }
-    }
-    .publish_more {
-        display: inline;
-        cursor: pointer;
-        color: #7a7c80;
-        font-size: 14px;
-        float: right;
-        display: flex;
-        justify-content: center;
 
-        img {
-            width: 16px;
-            height: 16px;
-        }
-    }
-    .pub_left_content {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        color: #000;
-        font-size: 14px;
-        margin-bottom: 12px;
+        .pub_left_content {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: #000;
+            font-size: 14px;
+            margin-bottom: 12px;
 
-        ul {
-            .li_show {
-                width: 753px;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                cursor: pointer;
-                div {
+            ul {
+                .li_show {
+                    width: 753px;
                     display: flex;
                     align-items: center;
-                    .pub_span {
-                        width: 550px;
+                    justify-content: space-between;
+                    cursor: pointer;
+
+                    div {
+                        display: flex;
+                        align-items: center;
+
+                        .pub_span {
+                            width: 550px;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                        }
+                    }
+                }
+
+                .li_active {
+                    // overflow: hidden;
+                    // display: none;
+                    cursor: pointer;
+
+                    img {
+                        width: 94px;
+                        height: 94px;
+                        float: left;
+                    }
+
+                    h5 {
+                        font-size: 14px;
+                        color: #000;
+                        margin: 10px 0;
+                        font-weight: normal;
                         overflow: hidden;
                         white-space: nowrap;
                         text-overflow: ellipsis;
                     }
+
+                    p {
+                        color: #939599;
+                        font-size: 13px;
+                        line-height: 22px;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+
+                    .pub_time {
+                        float: right;
+                        margin-top: 40px;
+                    }
                 }
-            }
-            .li_active {
-                // overflow: hidden;
-                // display: none;
-                cursor: pointer;
-                img {
-                    width: 94px;
-                    height: 94px;
-                    float: left;
+
+                li > div + div {
+                    margin-top: 8px;
                 }
-                h5 {
-                    font-size: 14px;
-                    color: #000;
-                    margin: 10px 0;
-                    font-weight: normal;
+            }
+
+            .block {
+                display: block !important;
+            }
+
+            // 原先的
+            .pub_tit {
+                display: flex;
+                align-items: center;
+
+                span {
+                    width: 600px;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
-                }
-                p {
-                    color: #939599;
-                    font-size: 13px;
-                    line-height: 22px;
-                    display: -webkit-box;
-                    -webkit-box-orient: vertical;
-                    -webkit-line-clamp: 2;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-                .pub_time {
-                    float: right;
-                    margin-top: 40px;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: #bf1616;
+                    }
                 }
             }
-            li > div + div {
-                margin-top: 8px;
+
+            img {
+                width: 36px;
+                height: 36px;
+                margin-right: 10px;
             }
-        }
 
-        .block {
-            display: block !important;
+            .pub_time {
+                color: #7a7c80;
+                font-size: 14px;
+                padding-right: 10px;
+            }
         }
+    }
 
-        // 原先的
-        .pub_tit {
+    .publish_right {
+        box-sizing: border-box;
+        width: 386px;
+        height: 381px;
+        background: #ffffff;
+        padding: 30px 30px 0;
+
+        .pub_r_top {
             display: flex;
-            align-items: center;
-            span {
-                width: 600px;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                cursor: pointer;
-                &:hover {
-                    color: #bf1616;
+            justify-content: space-between;
+            margin-bottom: 24px;
+            cursor: pointer;
+
+            div {
+                width: 154px;
+                height: 120px;
+                background: rgba(225, 102, 58, 0.1);
+                border-radius: 4px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                color: #632828;
+                font-size: 14px;
+                font-weight: bold;
+
+                img {
+                    width: 54px;
+                    height: 54px;
+                    margin-bottom: 8px;
                 }
             }
         }
-        img {
-            width: 36px;
-            height: 36px;
-            margin-right: 10px;
+
+        .pub_r_bottom {
+            .pub_r_row {
+                font-size: 14px;
+                color: #000;
+                margin-bottom: 17px;
+
+                span {
+                    &:nth-child(1) {
+                        margin-right: 44px;
+                    }
+
+                    &:nth-child(2) {
+                        margin-right: 12px;
+                    }
+                }
+            }
         }
-        .pub_time {
-            color: #7a7c80;
-            font-size: 14px;
-            padding-right: 10px;
+    }
+
+    .needs_con {
+        margin-bottom: 20px !important;
+    }
+
+    .needs {
+        div {
+            background: rgba(58, 114, 225, 0.1) !important;
         }
     }
-}
-.publish_right {
-    box-sizing: border-box;
-    width: 386px;
-    height: 381px;
-    background: #ffffff;
-    padding: 30px 30px 0;
-    .pub_r_top {
+
+    .plate {
         display: flex;
         justify-content: space-between;
-        margin-bottom: 24px;
-        cursor: pointer;
-        div {
-            width: 154px;
-            height: 120px;
-            background: rgba(225, 102, 58, 0.1);
-            border-radius: 4px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            color: #632828;
-            font-size: 14px;
+    }
+
+    .resources {
+        width: 590px;
+        height: 365px;
+        background: #ffffff;
+        padding: 27px 20px 30px;
+        box-sizing: border-box;
+    }
+
+    .res_top {
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: 12px;
+        border-bottom: 1px solid #f2f3f5;
+        margin-bottom: 30px;
+
+        .res_title {
+            font-size: 18px;
             font-weight: bold;
-            img {
-                width: 54px;
-                height: 54px;
-                margin-bottom: 8px;
-            }
+            color: #bf1616;
+            line-height: 24px;
         }
-    }
-    .pub_r_bottom {
-        .pub_r_row {
-            font-size: 14px;
-            color: #000;
-            margin-bottom: 17px;
+
+        .res_more {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+
             span {
-                &:nth-child(1) {
-                    margin-right: 44px;
-                }
-                &:nth-child(2) {
-                    margin-right: 12px;
-                }
+                font-size: 14px;
+                font-weight: 400;
+                color: #7a7c80;
+                line-height: 20px;
+            }
+
+            img {
+                width: 16px;
+                height: 16px;
             }
         }
     }
-}
-
-.needs_con {
-    margin-bottom: 20px !important;
-}
-.needs {
-    div {
-        background: rgba(58, 114, 225, 0.1) !important;
-    }
-}
-.plate {
-    display: flex;
-    justify-content: space-between;
-}
-.resources {
-    width: 590px;
-    height: 365px;
-    background: #ffffff;
-    padding: 27px 20px 30px;
-    box-sizing: border-box;
-}
-.res_top {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 12px;
-    border-bottom: 1px solid #f2f3f5;
-    margin-bottom: 30px;
-    .res_title {
-        font-size: 18px;
-        font-weight: bold;
-        color: #bf1616;
-        line-height: 24px;
-    }
-    .res_more {
+
+    .res_bottom {
         display: flex;
-        justify-content: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
         align-items: center;
-        cursor: pointer;
-        span {
-            font-size: 14px;
-            font-weight: 400;
-            color: #7a7c80;
-            line-height: 20px;
-        }
-        img {
-            width: 16px;
-            height: 16px;
-        }
-    }
-}
-.res_bottom {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    height: 260px;
-    .res_img {
-        cursor: pointer;
-        width: 265px;
-        height: 110px;
-        position: relative;
-        img {
+        height: 260px;
+
+        .res_img {
+            cursor: pointer;
             width: 265px;
             height: 110px;
-        }
-        p {
-            position: absolute;
-            top: 30px;
-            right: 100px;
-            font-size: 16px;
-            font-weight: 500;
-            color: #ffffff;
+            position: relative;
+
+            img {
+                width: 265px;
+                height: 110px;
+            }
+
+            p {
+                position: absolute;
+                top: 30px;
+                right: 100px;
+                font-size: 16px;
+                font-weight: 500;
+                color: #ffffff;
+            }
         }
     }
-}
 </style>
 <style lang="less">
-.home {
-    .el-carousel__indicators--horizontal {
-        bottom: 36px;
+    .home {
+        .el-carousel__indicators--horizontal {
+            bottom: 36px;
+        }
     }
-}
 </style>