|
|
@@ -2,15 +2,45 @@
|
|
|
<div class="timeline-container">
|
|
|
<div class="timeline-content">
|
|
|
<div class="timeline-entry-list">
|
|
|
- <img src="@/assets/image/banner4.png" alt="banner" class="banner">
|
|
|
- <!-- <div class="hot-list-wrap">
|
|
|
+ <!-- <img src="@/assets/image/banner4.png" alt="banner" class="banner"> -->
|
|
|
+ <div class="hot-list-wrap">
|
|
|
+ <el-empty :image-size="120" v-if="bannerList.length < 1"></el-empty>
|
|
|
+ <el-carousel indicator-position="none" height="120px" :interval="5000" v-if="bannerList.length > 0">
|
|
|
+ <el-carousel-item v-for="(item, index) in bannerList" :key="index">
|
|
|
+ <router-link :to="item.remark">
|
|
|
+ <img style="width: 100%; height: 100%" :src="item.dictValue" class="banner" />
|
|
|
+ </router-link>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ <div class="hot-list-wrap">
|
|
|
<el-empty :image-size="200" v-if="bannerList.length < 1"></el-empty>
|
|
|
- <el-carousel arrow="never" indicator-position="none" height="120px" :interval="5000" v-if="bannerList.length > 0">
|
|
|
+ <el-carousel indicator-position="none" height="120px" :interval="5000" v-if="bannerList.length > 0">
|
|
|
<el-carousel-item v-for="(item, index) in bannerList" :key="index">
|
|
|
- <img style="width: 100%; height: 100%" :src="item.url" class="banner" />
|
|
|
+ <router-link :to="item.remark">
|
|
|
+ <img style="width: 100%; height: 100%" :src="item.dictValue" class="banner" />
|
|
|
+ </router-link>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="entry-list-container" style="margin-bottom: 20px;">
|
|
|
+ <div class="tab-header" style="border-bottom:none">
|
|
|
+ <span class="tab-title">特价商品</span>
|
|
|
+ </div>
|
|
|
+ <div class="special-goods-list">
|
|
|
+ <div class="special-goods-item" v-for="(item,index) in specialGoodsList" :key="index">
|
|
|
+ <img width="100%" :src="item.url" alt="">
|
|
|
+ <div class="ctrl-box">
|
|
|
+ <a class="label" :href="item.path">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </a>
|
|
|
+ <!-- <a class="status" href="/">
|
|
|
+ <span>已参与</span>
|
|
|
+ </a> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="entry-list-container">
|
|
|
<div class="tab-header">
|
|
|
<span class="tab-title">最新通知</span>
|
|
|
@@ -45,7 +75,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script scoped>
|
|
|
-import { msgList } from "@/api/allApi";
|
|
|
+import { msgList,dictList } from "@/api/allApi";
|
|
|
import SiderInfo from '@/components/SiderInfo.vue';
|
|
|
import { debounce } from '@/utils/index';
|
|
|
export default{
|
|
|
@@ -55,10 +85,26 @@ export default{
|
|
|
data() {
|
|
|
return {
|
|
|
dataInfo:'',
|
|
|
- bannerList: [
|
|
|
- {
|
|
|
- url: require('@/assets/image/banner4.png')
|
|
|
- },
|
|
|
+ bannerList: [],
|
|
|
+ specialGoodsList:[
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ path:'/home/pointsMall/redeem?id=20&name=goodsNotice&type=8',
|
|
|
+ url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
|
|
|
+ name:'特价商品',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:2,
|
|
|
+ path:'/home/pointsMall/redeem?id=19&name=goodsNotice&type=8',
|
|
|
+ url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
|
|
|
+ name:'限时商品',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:3,
|
|
|
+ path:'/home/pointsMall/redeem?id=18&name=goodsNotice&type=8',
|
|
|
+ url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
|
|
|
+ name:'团购商品',
|
|
|
+ },
|
|
|
],
|
|
|
dataList:[],
|
|
|
page:1,
|
|
|
@@ -67,8 +113,14 @@ export default{
|
|
|
},
|
|
|
created(){
|
|
|
this.getDataList();
|
|
|
+ this.getBannerList();
|
|
|
},
|
|
|
methods:{
|
|
|
+ getBannerList(){
|
|
|
+ dictList({dictType:'index_lbt'}).then(response=>{
|
|
|
+ this.bannerList = response.data.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
handleClickMag(id) {
|
|
|
this.$router.push({
|
|
|
path: '/home/index/msgDetail',
|
|
|
@@ -244,4 +296,55 @@ export default{
|
|
|
margin-left: 24px;
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
+.special-goods-list{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.special-goods-list .special-goods-item{
|
|
|
+ position: relative;
|
|
|
+ /* padding: 0 6px; */
|
|
|
+ width: 230px;
|
|
|
+ height: 169px;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+.special-goods-item .ctrl-box .label{
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ top: 40px;
|
|
|
+ line-height: 32px;
|
|
|
+ height: 32px;
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ z-index: 1;
|
|
|
+ color: black;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ /* border-radius: 6px; */
|
|
|
+ font-weight: 800;
|
|
|
+
|
|
|
+}
|
|
|
+.special-goods-item .ctrl-box .status{
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ top: 70px;
|
|
|
+ line-height: 32px;
|
|
|
+ height: 32px;
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ z-index: 1;
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgba(0, 0, 0, .2);
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-weight: 300;
|
|
|
+}
|
|
|
+/* .special-goods-item .ctrl-box .label:hover {
|
|
|
+ background-color: rgba(0, 0, 0, .4);
|
|
|
+}
|
|
|
+.special-goods-item .ctrl-box .status:hover {
|
|
|
+ background-color: rgba(0, 0, 0, .4);
|
|
|
+} */
|
|
|
</style>
|
