bi-element-ui 0.1.48 → 0.1.49

package/src/views/showData.vue

@@ -1,455 +1,455 @@
-<template>
-  <div class="bi_home_data">
-    <el-scrollbar>
-      <div class="content">
-        <div class="swiper">
-          <el-carousel class="swiper_data" height="19.5vw" :autoplay="true">
-            <el-carousel-item v-for="(item, index) in swiperData" :key="index">
-              <div class="swiper_content" :style="'background: url(' + item.image_path + ') no-repeat;background-size: 100% 100%;'" @click="swiperClick(item)"></div>
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-        <div class="data">
-          <div class="data_search">
-            <el-input placeholder="输入标题/关键字" v-model="searchData.combination" size="small" style="width:14vw;">
-              <el-button icon="el-icon-search" slot="append" style="width:3vw;height:32px;" @click="clickSearch"></el-button>
-            </el-input>
-            <div>
-              <el-button v-for="(item, index) in options.buttonList" :key="index" size="small" style="width:84px;height:32px;" @click="buttonClick(item.value)">{{ item.label }}</el-button>
-            </div>
-          </div>
-          <div class="data_content">
-            <div v-for="(item, index) in messageData" :key="index" class="message_item" @click="getDataDetail(item)">
-              <div class="item_title">
-                <img :src="returnCategoryImg(item.category_id)" alt="" />
-                <p>{{ returnCategory(item.category_id) }}</p>
-              </div>
-              <div class="item_content">
-                <img :src="item.cover_image" alt="" />
-                <div class="content_content">
-                  <div class="content_title">{{ item.title }}</div>
-                  <div class="content_desc">{{ item.short_desc }}</div>
-                  <div class="content_time">{{ item.create_time }}</div>
-                </div>
-              </div>
-              <img v-if="!item.is_read" class="is_read" src="./img/new.png" alt="" />
-            </div>
-            <div class="left_page" @click="pageClick('left')">
-              <img src="./img/left_page.png" :style="canLeftClick ? 'opacity:1' : 'opacity:0.5'" alt="" />
-            </div>
-            <div class="right_page" @click="pageClick('right')">
-              <img src="./img/right_page.png" :style="canRightClick ? 'opacity:1' : 'opacity:0.5'" alt="" />
-            </div>
-          </div>
-        </div>
-        <el-drawer title="消息详情" :visible.sync="dataDetail.isShow" direction="rtl" size="560" :before-close="handleClose">
-          <el-scrollbar>
-            <div class="detail">
-              <div class="detail_title">{{ dataDetail.data.title }}</div>
-              <div class="detail_time">{{ dataDetail.data.create_time }}</div>
-              <div class="detail_desc">{{ dataDetail.data.short_desc }}</div>
-              <div class="detail_content">
-                <div class="content_content" v-html="dataDetail.data.content"></div>
-              </div>
-            </div>
-          </el-scrollbar>
-        </el-drawer>
-      </div>
-    </el-scrollbar>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-import axios from 'axios'
-export default {
-  name: 'BiHomeData',
-  props: {
-    userId: {
-      type: String,
-      default: '1919'
-    }
-  },
-  data() {
-    return {
-      uid: '',
-      searchData: {
-        uid: '1919',
-        combination: '',
-        category_id: '',
-        page: 1,
-        page_size: 4,
-        total: 0
-      },
-      url: 'http://applause.zwwlkj03.top/api',
-      options: {
-        buttonList: []
-      },
-      swiperData: [],
-      messageData: [],
-      dataDetail: {
-        isShow: false,
-        data: {}
-      }
-    }
-  },
-  computed: {
-    canLeftClick() {
-      if (this.searchData.page <= 1) {
-        return false
-      } else {
-        return true
-      }
-    },
-    canRightClick() {
-      const allPage = Math.ceil(this.searchData.total / this.searchData.page_size)
-      if (this.searchData.page >= allPage) {
-        return false
-      } else {
-        return true
-      }
-    }
-  },
-  mounted() {
-    this.uid = this.userId
-    this.searchData.uid = this.userId
-    this.init()
-  },
-  methods: {
-    init() {
-      this.Searchcondition()
-      this.getSwiper()
-      this.getMessage()
-    },
-    swiperClick(item) {
-      if (item.type === '1') {
-        window.open(item.jump_url, '_blank')
-      }
-      if (item.type === '2') {
-        this.getDetail(this.uid, item.notify_id)
-      }
-    },
-    clickSearch() {
-      this.searchData.page = 1
-      this.searchData.category_id = ''
-      this.getMessage()
-    },
-    buttonClick(id) {
-      this.searchData.page = 1
-      this.searchData.category_id = id
-      this.getMessage()
-    },
-    pageClick(type) {
-      if (type === 'left' && this.canLeftClick) {
-        this.searchData.page--
-        this.getMessage()
-      }
-      if (type === 'right' && this.canRightClick) {
-        this.searchData.page++
-        this.getMessage()
-      }
-    },
-
-    async getMessage() {
-      const res = await axios.post(this.url + '/home/notify/list', this.searchData)
-      if (res.data.status_code === 1) {
-        this.messageData = res.data.data.data
-        this.searchData.page = res.data.data.page_info.page
-        this.searchData.total = res.data.data.page_info.total
-      }
-    },
-    async getSwiper() {
-      const res = await axios.post(this.url + '/home/carousel/list', { uid: this.uid })
-      if (res.data.status_code === 1) {
-        this.swiperData = res.data.data.data
-      }
-    },
-    async Searchcondition() {
-      const res = await axios.post(this.url + '/home/Searchcondition/index', { uid: this.uid, notify_category: 1 })
-      if (res.data.status_code === 1) {
-        this.options.buttonList = res.data.data.notify_category
-      }
-    },
-    returnCategory(id) {
-      const list = this.options.buttonList.filter(data => {
-        return data.value === id
-      })
-      if (list.length) {
-        return list[0].label
-      } else {
-        return '掌资讯'
-      }
-    },
-    returnCategoryImg(id) {
-      switch (id) {
-        case '1':
-          return require('./img/1.png')
-          break
-        case '2':
-          return require('./img/2.png')
-          break
-        case '3':
-          return require('./img/3.png')
-          break
-        case '4':
-          return require('./img/4.png')
-          break
-        default:
-          return require('./img/1.png')
-      }
-    },
-    getDataDetail(data) {
-      this.sendRaed(data)
-      this.getDetail(this.uid, data.id)
-    },
-    // 数据已读
-    async sendRaed(data) {
-      const res = await axios.post(this.url + '/home/notify/read', { uid: this.uid, notify_id: data.id })
-      if (res.data.status_code === 1) {
-        data.is_read = true
-      }
-    },
-    // 数据详情
-    async getDetail(uid, notify_id) {
-      const res = await axios.post(this.url + '/home/notify/detail', { uid, notify_id })
-      if (res.data.status_code === 1) {
-        this.dataDetail.data = res.data.data.data
-        this.dataDetail.isShow = true
-      }
-    },
-    handleClose() {
-      this.dataDetail.isShow = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.bi_home_data {
-  .content {
-    width: 100%;
-    height: calc(100vh - 115px);
-    background: #ffffff;
-    border-radius: 2px;
-    .swiper {
-      width: 100%;
-      height: 19.5vw;
-      .swiper_data {
-        .swiper_content {
-          width: 100%;
-          height: 19.5vw;
-          background: url(./img/swiperBg.png) no-repeat;
-          background-size: 100% 100%;
-          display: flex;
-          box-sizing: border-box;
-          padding: 1.5vw 6vw;
-          .swiper_message {
-            .title {
-              width: 31.5vw;
-              height: 3vw;
-              font-size: 2.1vw;
-              font-weight: 500;
-              color: #333333;
-              line-height: 3vw;
-            }
-            .desc {
-              width: 31.5vw;
-              height: 1.1vw;
-              font-size: 0.8vw;
-              font-weight: 400;
-              color: #333333;
-              line-height: 1.1vw;
-              margin-top: 1.5vw;
-            }
-          }
-        }
-      }
-    }
-    .data {
-      .data_search {
-        margin: 1vw 3.5vw;
-        display: flex;
-        justify-content: space-between;
-      }
-      .data_content {
-        margin: 0 3.5vw;
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        position: relative;
-        left: 0;
-        top: 0;
-        height: 19.5vw;
-        .left_page {
-          position: absolute;
-          left: -2.8vw;
-          top: 45%;
-          width: 2.25vw;
-          height: 2.25vw;
-          cursor: pointer;
-          img {
-            width: 2.25vw;
-            height: 2.25vw;
-          }
-        }
-        .right_page {
-          position: absolute;
-          right: -2.8vw;
-          top: 45%;
-          width: 2.25vw;
-          height: 2.25vw;
-          cursor: pointer;
-          img {
-            width: 2.25vw;
-            height: 2.25vw;
-          }
-        }
-        .message_item {
-          width: 37vw;
-          height: 9vw;
-          background: #f8f8fa;
-          box-shadow: 0px 0.1vw 0.45vw 0px rgba(168, 203, 255, 0.36);
-          border-radius: 0.2vw;
-          border: 0.1vw solid #ffffff;
-          margin-bottom: 1.5vw;
-          box-sizing: border-box;
-          padding: 1vw;
-          position: relative;
-          left: 0;
-          top: 0;
-          cursor: pointer;
-          &:nth-child(3) {
-            margin-bottom: 0;
-          }
-          &:nth-child(4) {
-            margin-bottom: 0;
-          }
-          .item_title {
-            display: flex;
-            height: 1vw;
-            img {
-              width: 1vw;
-              height: 1vw;
-            }
-            p {
-              height: 1vw;
-              line-height: 1vw;
-              margin: 0 0 0 0.5vw;
-            }
-          }
-          .item_content {
-            margin-top: 1.6vw;
-            display: flex;
-            img {
-              width: 4vw;
-              height: 4vw;
-              margin-right: 1.2vw;
-            }
-            .content_content {
-              width: 31vw;
-              position: relative;
-              top: 0;
-              left: 0;
-              .content_title {
-                max-width: 20vw;
-                height: 1.1vw;
-                font-size: 0.8vw;
-                font-weight: 500;
-                color: #333333;
-                line-height: 1.1vw;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-              .content_desc {
-                max-width: 26vw;
-                height: 1vw;
-                margin-top: 0.8vw;
-                font-size: 0.7vw;
-                font-weight: 400;
-                color: #333333;
-                line-height: 1vw;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-              .content_time {
-                position: absolute;
-                left: 22vw;
-                top: 0.05vw;
-                width: 8vw;
-                height: 1vw;
-                font-size: 0.7vw;
-                font-weight: 400;
-                color: #333333;
-                line-height: 1vw;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-            }
-          }
-          .is_read {
-            position: absolute;
-            right: 0.1vw;
-            top: 0.3vw;
-            width: 1.5vw;
-            height: 0.8vw;
-          }
-        }
-      }
-    }
-    .detail {
-      width: 100%;
-      box-sizing: border-box;
-      padding: 0 20px;
-      height: calc(100vh - 80px);
-      .detail_title {
-        width: 440px;
-        height: 22px;
-        font-size: 16px;
-        font-weight: 500;
-        color: #333333;
-        line-height: 22px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      .detail_time {
-        width: 320px;
-        height: 16px;
-        margin-top: 12px;
-        font-size: 12px;
-        font-weight: 400;
-        color: #999999;
-        line-height: 16px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      .detail_desc {
-        margin-top: 24px;
-        width: 500px;
-        font-size: 14px;
-        font-weight: 400;
-        color: #333333;
-        line-height: 20px;
-      }
-      .detail_content {
-        width: 520px;
-        margin-top: 24px;
-        overflow-y: auto;
-        .content_content {
-          width: 500px;
-        }
-      }
-    }
-  }
-}
-</style>
-<style>
-.el-carousel__indicator.is-active button {
-  opacity: 1;
-  background-color: #38ce81;
-}
-</style>
+<template>
+  <div class="bi_home_data">
+    <el-scrollbar>
+      <div class="content">
+        <div class="swiper">
+          <el-carousel class="swiper_data" height="19.5vw" :autoplay="true">
+            <el-carousel-item v-for="(item, index) in swiperData" :key="index">
+              <div class="swiper_content" :style="'background: url(' + item.image_path + ') no-repeat;background-size: 100% 100%;'" @click="swiperClick(item)"></div>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <div class="data">
+          <div class="data_search">
+            <el-input placeholder="输入标题/关键字" v-model="searchData.combination" size="small" style="width:14vw;">
+              <el-button icon="el-icon-search" slot="append" style="width:3vw;height:32px;" @click="clickSearch"></el-button>
+            </el-input>
+            <div>
+              <el-button v-for="(item, index) in options.buttonList" :key="index" size="small" style="width:84px;height:32px;" @click="buttonClick(item.value)">{{ item.label }}</el-button>
+            </div>
+          </div>
+          <div class="data_content">
+            <div v-for="(item, index) in messageData" :key="index" class="message_item" @click="getDataDetail(item)">
+              <div class="item_title">
+                <img :src="returnCategoryImg(item.category_id)" alt="" />
+                <p>{{ returnCategory(item.category_id) }}</p>
+              </div>
+              <div class="item_content">
+                <img :src="item.cover_image" alt="" />
+                <div class="content_content">
+                  <div class="content_title">{{ item.title }}</div>
+                  <div class="content_desc">{{ item.short_desc }}</div>
+                  <div class="content_time">{{ item.create_time }}</div>
+                </div>
+              </div>
+              <img v-if="!item.is_read" class="is_read" src="./img/new.png" alt="" />
+            </div>
+            <div class="left_page" @click="pageClick('left')">
+              <img src="./img/left_page.png" :style="canLeftClick ? 'opacity:1' : 'opacity:0.5'" alt="" />
+            </div>
+            <div class="right_page" @click="pageClick('right')">
+              <img src="./img/right_page.png" :style="canRightClick ? 'opacity:1' : 'opacity:0.5'" alt="" />
+            </div>
+          </div>
+        </div>
+        <el-drawer title="消息详情" :visible.sync="dataDetail.isShow" direction="rtl" size="560" :before-close="handleClose">
+          <el-scrollbar>
+            <div class="detail">
+              <div class="detail_title">{{ dataDetail.data.title }}</div>
+              <div class="detail_time">{{ dataDetail.data.create_time }}</div>
+              <div class="detail_desc">{{ dataDetail.data.short_desc }}</div>
+              <div class="detail_content">
+                <div class="content_content" v-html="dataDetail.data.content"></div>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-drawer>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import axios from 'axios'
+export default {
+  name: 'BiHomeData',
+  props: {
+    userId: {
+      type: String,
+      default: '1919'
+    }
+  },
+  data() {
+    return {
+      uid: '',
+      searchData: {
+        uid: '1919',
+        combination: '',
+        category_id: '',
+        page: 1,
+        page_size: 4,
+        total: 0
+      },
+      url: 'http://applause.zwwlkj03.top/api',
+      options: {
+        buttonList: []
+      },
+      swiperData: [],
+      messageData: [],
+      dataDetail: {
+        isShow: false,
+        data: {}
+      }
+    }
+  },
+  computed: {
+    canLeftClick() {
+      if (this.searchData.page <= 1) {
+        return false
+      } else {
+        return true
+      }
+    },
+    canRightClick() {
+      const allPage = Math.ceil(this.searchData.total / this.searchData.page_size)
+      if (this.searchData.page >= allPage) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  mounted() {
+    this.uid = this.userId
+    this.searchData.uid = this.userId
+    this.init()
+  },
+  methods: {
+    init() {
+      this.Searchcondition()
+      this.getSwiper()
+      this.getMessage()
+    },
+    swiperClick(item) {
+      if (item.type === '1') {
+        window.open(item.jump_url, '_blank')
+      }
+      if (item.type === '2') {
+        this.getDetail(this.uid, item.notify_id)
+      }
+    },
+    clickSearch() {
+      this.searchData.page = 1
+      this.searchData.category_id = ''
+      this.getMessage()
+    },
+    buttonClick(id) {
+      this.searchData.page = 1
+      this.searchData.category_id = id
+      this.getMessage()
+    },
+    pageClick(type) {
+      if (type === 'left' && this.canLeftClick) {
+        this.searchData.page--
+        this.getMessage()
+      }
+      if (type === 'right' && this.canRightClick) {
+        this.searchData.page++
+        this.getMessage()
+      }
+    },
+
+    async getMessage() {
+      const res = await axios.post(this.url + '/home/notify/list', this.searchData)
+      if (res.data.status_code === 1) {
+        this.messageData = res.data.data.data
+        this.searchData.page = res.data.data.page_info.page
+        this.searchData.total = res.data.data.page_info.total
+      }
+    },
+    async getSwiper() {
+      const res = await axios.post(this.url + '/home/carousel/list', { uid: this.uid })
+      if (res.data.status_code === 1) {
+        this.swiperData = res.data.data.data
+      }
+    },
+    async Searchcondition() {
+      const res = await axios.post(this.url + '/home/Searchcondition/index', { uid: this.uid, notify_category: 1 })
+      if (res.data.status_code === 1) {
+        this.options.buttonList = res.data.data.notify_category
+      }
+    },
+    returnCategory(id) {
+      const list = this.options.buttonList.filter(data => {
+        return data.value === id
+      })
+      if (list.length) {
+        return list[0].label
+      } else {
+        return '掌资讯'
+      }
+    },
+    returnCategoryImg(id) {
+      switch (id) {
+        case '1':
+          return require('./img/1.png')
+          break
+        case '2':
+          return require('./img/2.png')
+          break
+        case '3':
+          return require('./img/3.png')
+          break
+        case '4':
+          return require('./img/4.png')
+          break
+        default:
+          return require('./img/1.png')
+      }
+    },
+    getDataDetail(data) {
+      this.sendRaed(data)
+      this.getDetail(this.uid, data.id)
+    },
+    // 数据已读
+    async sendRaed(data) {
+      const res = await axios.post(this.url + '/home/notify/read', { uid: this.uid, notify_id: data.id })
+      if (res.data.status_code === 1) {
+        data.is_read = true
+      }
+    },
+    // 数据详情
+    async getDetail(uid, notify_id) {
+      const res = await axios.post(this.url + '/home/notify/detail', { uid, notify_id })
+      if (res.data.status_code === 1) {
+        this.dataDetail.data = res.data.data.data
+        this.dataDetail.isShow = true
+      }
+    },
+    handleClose() {
+      this.dataDetail.isShow = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bi_home_data {
+  .content {
+    width: 100%;
+    height: calc(100vh - 115px);
+    background: #ffffff;
+    border-radius: 2px;
+    .swiper {
+      width: 100%;
+      height: 19.5vw;
+      .swiper_data {
+        .swiper_content {
+          width: 100%;
+          height: 19.5vw;
+          background: url(./img/swiperBg.png) no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          box-sizing: border-box;
+          padding: 1.5vw 6vw;
+          .swiper_message {
+            .title {
+              width: 31.5vw;
+              height: 3vw;
+              font-size: 2.1vw;
+              font-weight: 500;
+              color: #333333;
+              line-height: 3vw;
+            }
+            .desc {
+              width: 31.5vw;
+              height: 1.1vw;
+              font-size: 0.8vw;
+              font-weight: 400;
+              color: #333333;
+              line-height: 1.1vw;
+              margin-top: 1.5vw;
+            }
+          }
+        }
+      }
+    }
+    .data {
+      .data_search {
+        margin: 1vw 3.5vw;
+        display: flex;
+        justify-content: space-between;
+      }
+      .data_content {
+        margin: 0 3.5vw;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        position: relative;
+        left: 0;
+        top: 0;
+        height: 19.5vw;
+        .left_page {
+          position: absolute;
+          left: -2.8vw;
+          top: 45%;
+          width: 2.25vw;
+          height: 2.25vw;
+          cursor: pointer;
+          img {
+            width: 2.25vw;
+            height: 2.25vw;
+          }
+        }
+        .right_page {
+          position: absolute;
+          right: -2.8vw;
+          top: 45%;
+          width: 2.25vw;
+          height: 2.25vw;
+          cursor: pointer;
+          img {
+            width: 2.25vw;
+            height: 2.25vw;
+          }
+        }
+        .message_item {
+          width: 37vw;
+          height: 9vw;
+          background: #f8f8fa;
+          box-shadow: 0px 0.1vw 0.45vw 0px rgba(168, 203, 255, 0.36);
+          border-radius: 0.2vw;
+          border: 0.1vw solid #ffffff;
+          margin-bottom: 1.5vw;
+          box-sizing: border-box;
+          padding: 1vw;
+          position: relative;
+          left: 0;
+          top: 0;
+          cursor: pointer;
+          &:nth-child(3) {
+            margin-bottom: 0;
+          }
+          &:nth-child(4) {
+            margin-bottom: 0;
+          }
+          .item_title {
+            display: flex;
+            height: 1vw;
+            img {
+              width: 1vw;
+              height: 1vw;
+            }
+            p {
+              height: 1vw;
+              line-height: 1vw;
+              margin: 0 0 0 0.5vw;
+            }
+          }
+          .item_content {
+            margin-top: 1.6vw;
+            display: flex;
+            img {
+              width: 4vw;
+              height: 4vw;
+              margin-right: 1.2vw;
+            }
+            .content_content {
+              width: 31vw;
+              position: relative;
+              top: 0;
+              left: 0;
+              .content_title {
+                max-width: 20vw;
+                height: 1.1vw;
+                font-size: 0.8vw;
+                font-weight: 500;
+                color: #333333;
+                line-height: 1.1vw;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+              .content_desc {
+                max-width: 26vw;
+                height: 1vw;
+                margin-top: 0.8vw;
+                font-size: 0.7vw;
+                font-weight: 400;
+                color: #333333;
+                line-height: 1vw;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+              .content_time {
+                position: absolute;
+                left: 22vw;
+                top: 0.05vw;
+                width: 8vw;
+                height: 1vw;
+                font-size: 0.7vw;
+                font-weight: 400;
+                color: #333333;
+                line-height: 1vw;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+          .is_read {
+            position: absolute;
+            right: 0.1vw;
+            top: 0.3vw;
+            width: 1.5vw;
+            height: 0.8vw;
+          }
+        }
+      }
+    }
+    .detail {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0 20px;
+      height: calc(100vh - 80px);
+      .detail_title {
+        width: 440px;
+        height: 22px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #333333;
+        line-height: 22px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .detail_time {
+        width: 320px;
+        height: 16px;
+        margin-top: 12px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 16px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .detail_desc {
+        margin-top: 24px;
+        width: 500px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 20px;
+      }
+      .detail_content {
+        width: 520px;
+        margin-top: 24px;
+        overflow-y: auto;
+        .content_content {
+          width: 500px;
+        }
+      }
+    }
+  }
+}
+</style>
+<style>
+.el-carousel__indicator.is-active button {
+  opacity: 1;
+  background-color: #38ce81;
+}
+</style>