fix: image close tag

pages/raffle/raffle.vue

@@ -1,371 +1,372 @@
 <template>
-	<view class="container">
-		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="info" :current="current" :mode="mode"
-			:dots-styles="dotsStyles" field="content">
-			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
-				<swiper-item>
-					<image class="swiperItem" :src="$fileUrl() + '/raffle/2.jpg'" mode="aspectFill">
-				</swiper-item>
-				<swiper-item>
-					<image class="swiperItem" :src="$fileUrl() + '/raffle/3.jpg'" mode="aspectFill">
-				</swiper-item>
-				<swiper-item>
-					<image class="swiperItem" :src="$fileUrl() + '/raffle/1.jpg'" mode="aspectFill">
-				</swiper-item>
-			</swiper>
-		</uni-swiper-dot>
-		<view class="tabs">
-			<view class="tab" @click="clickTab(1)">
-				<image class="tabImg" :src="tabImg(1)" mode="widthFix"></image>
-			</view>
-			<view class="tab" @click="clickTab(2)">
-				<image class="tabImg" :src="tabImg(2)" mode="widthFix"></image>
-			</view>
-			<view class="tab" @click="clickTab(3)">
-				<image class="tabImg" :src="tabImg(3)" mode="widthFix"></image>
-			</view>
-			<view class="tab" @click="clickTab(4)">
-				<image class="tabImg" :src="tabImg(4)" mode="widthFix"></image>
-			</view>
-		</view>
-		<view class="list" v-if="tabActive == 1">
-			<view class="kabk" v-for="(item, index) in list" @click="toDrawCard({id: item.id})">
-				<view class="ka1">
-					<image class="leftImg" :src="item.icon" mode="aspectFill"></image>
-					<view class="rightInfo">
-						<view class="row title">
-							{{item.name}}
-						</view>
-						<view class="row">
-							<span class="price">￥
-							<span style="font-size: 20px">{{item.price}}</span>
-							</span>
-						</view>
-						<view class="row prizes">
-							<image v-for="(item2, index2) in item.prizeIconList" class="prize" :src="item2" mode="aspectFill"></image>
-						</view>
-						<view class="tags">
-							<image v-for="(item3, index3) in item.subType" :class="['tag', 'tag_' + index3]" :src="$fileUrl() + `/raffle/tag${subType(item3)}.png`" mode="widthFix"></image>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="list2" v-if="tabActive == 2">
-			<view class="ka" v-for="(item, index) in list" @click="toDrawCard({id: item.id})">
-				<view class="top">
-					<image mode="aspectFit" :src="item.icon"></image>
-				</view>
-				<view class="ka-info">
-					<view class="ka-name">
-						{{item.name}}
-					</view>
-					<view class="row">
-						<uni-tag class="tag" text="创意热销" inverted type="default"></uni-tag>
-						<view class="money">
-							¥{{item.price}}
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="list2 three" v-if="tabActive > 2">
-			<view class="ka" v-for="(item, index) in list" @click="toDrawCard({id: item.id})">
-				<view class="top">
-					<image mode="aspectFit" :src="item.icon"></image>
-				</view>
-				<view class="ka-info">
-					<view class="ka-name">
-						{{item.name}}
-					</view>
-					<view class="row">
-						<uni-tag class="tag" text="创意热销" inverted type="default"></uni-tag>
-						<view class="money">
-							¥{{item.price}}
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
+  <view class="container">
+    <uni-swiper-dot
+      class="uni-swiper-dot-box"
+      @clickItem="clickItem"
+      :info="info"
+      :current="current"
+      :mode="mode"
+      :dots-styles="dotsStyles"
+      field="content"
+    >
+      <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
+        <swiper-item>
+          <image class="swiperItem" :src="$fileUrl() + '/raffle/2.jpg'" mode="aspectFill" />
+        </swiper-item>
+        <swiper-item>
+          <image class="swiperItem" :src="$fileUrl() + '/raffle/3.jpg'" mode="aspectFill" />
+        </swiper-item>
+        <swiper-item>
+          <image class="swiperItem" :src="$fileUrl() + '/raffle/1.jpg'" mode="aspectFill" />
+        </swiper-item>
+      </swiper>
+    </uni-swiper-dot>
+    <view class="tabs">
+      <view class="tab" @click="clickTab(1)">
+        <image class="tabImg" :src="tabImg(1)" mode="widthFix"></image>
+      </view>
+      <view class="tab" @click="clickTab(2)">
+        <image class="tabImg" :src="tabImg(2)" mode="widthFix"></image>
+      </view>
+      <view class="tab" @click="clickTab(3)">
+        <image class="tabImg" :src="tabImg(3)" mode="widthFix"></image>
+      </view>
+      <view class="tab" @click="clickTab(4)">
+        <image class="tabImg" :src="tabImg(4)" mode="widthFix"></image>
+      </view>
+    </view>
+    <view class="list" v-if="tabActive == 1">
+      <view class="kabk" v-for="(item, index) in list" @click="toDrawCard({ id: item.id })">
+        <view class="ka1">
+          <image class="leftImg" :src="item.icon" mode="aspectFill"></image>
+          <view class="rightInfo">
+            <view class="row title">
+              {{ item.name }}
+            </view>
+            <view class="row">
+              <span class="price">
+                ￥
+                <span style="font-size: 20px">{{ item.price }}</span>
+              </span>
+            </view>
+            <view class="row prizes">
+              <image v-for="(item2, index2) in item.prizeIconList" class="prize" :src="item2" mode="aspectFill"></image>
+            </view>
+            <view class="tags">
+              <image
+                v-for="(item3, index3) in item.subType"
+                :class="['tag', 'tag_' + index3]"
+                :src="$fileUrl() + `/raffle/tag${subType(item3)}.png`"
+                mode="widthFix"
+              ></image>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list2" v-if="tabActive == 2">
+      <view class="ka" v-for="(item, index) in list" @click="toDrawCard({ id: item.id })">
+        <view class="top">
+          <image mode="aspectFit" :src="item.icon"></image>
+        </view>
+        <view class="ka-info">
+          <view class="ka-name">
+            {{ item.name }}
+          </view>
+          <view class="row">
+            <uni-tag class="tag" text="创意热销" inverted type="default"></uni-tag>
+            <view class="money">¥{{ item.price }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list2 three" v-if="tabActive > 2">
+      <view class="ka" v-for="(item, index) in list" @click="toDrawCard({ id: item.id })">
+        <view class="top">
+          <image mode="aspectFit" :src="item.icon"></image>
+        </view>
+        <view class="ka-info">
+          <view class="ka-name">
+            {{ item.name }}
+          </view>
+          <view class="row">
+            <uni-tag class="tag" text="创意热销" inverted type="default"></uni-tag>
+            <view class="money">¥{{ item.price }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import {
-		raffleListApi
-	} from "@/api/drawCard.js"
-	
-	export default {
-		data() {
-			return {
-				tabActive: 1,
-				list: [],
-				info: [{
-					content: '内容 A'
-				}, {
-					content: '内容 B'
-				}, {
-					content: '内容 C'
-				}],
-				dotsStyles: {},
-				current: 0,
-				mode: 'dot',
-				swiperDotIndex: 0
-			}
-		},
-		onShow() {
-			this.getList()
-		},
-		methods: {
-			toDrawCard(params) {
-				let url = ''
-				if (this.tabActive == 1) {
-					url = '/pages/drawCard_infinite/drawCard_infinite'
-				} else if (this.tabActive == 2) {
-					url = '/pages/drawCard_last/drawCard_last'
-				} else if (this.tabActive == 3) {
-					url = '/pages/drawCard_fullSet/drawCard_fullSet'
-				} else if (this.tabActive == 4) {
-					url = '/pages/drawCard_fullSet/drawCard_fullSet'
-				}
-				this.$navigateTo(url, params)
-			},
-			getList () {
-				let params = {
-					limit: 999,
-					page: 1,
-					type: this.tabActive
-				}
-				raffleListApi(params).then(res => {
-					console.log(res, 'res')
-					let list = res.data.list
-					for (var i = 0; i < list.length; i++) {
-						if (list[i].subType) {
-							list[i].subType = list[i].subType.split(',')
-						}
-					}
-					console.log('list',list)
-					this.list = list
-				})
-			},
-			subType(value) {
-				let index = null
-				if (value == 120) {
-					index = 1
-				} else if (value == 110) {
-					index = 2
-				} else if (value == 111) {
-					index = 3
-				} else if (value == 112) {
-					index = 4
-				}
-				return index
-			},
-			tabImg(index) {
-				let url = 'https://mall.rongtongh.cn/storage/img/raffle/tab' 
-				+ index 
-				+ (this.tabActive == index ? 'a' : '' )
-				+ '.png'
-				return url
-			},
-			clickTab(index) {
-				this.tabActive = index
-				this.getList()
-			},
-			clickItem() {
+import { raffleListApi } from '@/api/drawCard.js'
 
-			},
-			change() {
-				
-			}
-		}
-	}
+export default {
+  data() {
+    return {
+      tabActive: 1,
+      list: [],
+      info: [
+        {
+          content: '内容 A',
+        },
+        {
+          content: '内容 B',
+        },
+        {
+          content: '内容 C',
+        },
+      ],
+      dotsStyles: {},
+      current: 0,
+      mode: 'dot',
+      swiperDotIndex: 0,
+    }
+  },
+  onShow() {
+    this.getList()
+  },
+  methods: {
+    toDrawCard(params) {
+      let url = ''
+      if (this.tabActive == 1) {
+        url = '/pages/drawCard_infinite/drawCard_infinite'
+      } else if (this.tabActive == 2) {
+        url = '/pages/drawCard_last/drawCard_last'
+      } else if (this.tabActive == 3) {
+        url = '/pages/drawCard_fullSet/drawCard_fullSet'
+      } else if (this.tabActive == 4) {
+        url = '/pages/drawCard_fullSet/drawCard_fullSet'
+      }
+      this.$navigateTo(url, params)
+    },
+    getList() {
+      let params = {
+        limit: 999,
+        page: 1,
+        type: this.tabActive,
+      }
+      raffleListApi(params).then(res => {
+        console.log(res, 'res')
+        let list = res.data.list
+        for (var i = 0; i < list.length; i++) {
+          if (list[i].subType) {
+            list[i].subType = list[i].subType.split(',')
+          }
+        }
+        console.log('list', list)
+        this.list = list
+      })
+    },
+    subType(value) {
+      let index = null
+      if (value == 120) {
+        index = 1
+      } else if (value == 110) {
+        index = 2
+      } else if (value == 111) {
+        index = 3
+      } else if (value == 112) {
+        index = 4
+      }
+      return index
+    },
+    tabImg(index) {
+      let url =
+        'https://mall.rongtongh.cn/storage/img/raffle/tab' + index + (this.tabActive == index ? 'a' : '') + '.png'
+      return url
+    },
+    clickTab(index) {
+      this.tabActive = index
+      this.getList()
+    },
+    clickItem() {},
+    change() {},
+  },
+}
 </script>
 
 <style scoped lang="scss">
-	.swiperItem {
-		width: 100%;
-		height: 100%;
-	}
-	.tabs {
-		margin: 10px 0;
-		height: 36px;
-		display: flex;
-		justify-content: space-around;
-		align-items: center;
-		
-		.tab {
-			.tabImg {
-				width: 18vw;
-				height: 100%;
-			}
-		}
-	}
-	.list {
-		padding: 10px;
-		
-		.kabk {
-			padding: 1px;
-			background: linear-gradient(180deg, rgba(211, 74, 216, 0.3) 0%, rgba(58, 67, 207, 0.3) 25%);
-			border-radius: 13px;
-			box-shadow: 1px 1px 4px rgba(176, 123, 255, 0.5);
-			margin-bottom: 10px;
-			overflow: hidden;
-		}
-		.ka1 {
-			padding: 10px;
-			display: flex;
-			background: #fff;
-			border-radius: 12px;
-			position: relative;
-			
-			.leftImg {
-				width: 30vw;
-				height: 30vw;
-				border-radius: 10px;
-				margin-right: 8px;
-			}
-			.rightInfo {
-				flex: 1;
-				
-				.row {
-					margin-bottom: 5px;
-					
-					.price {
-						font-size: 14px;
-						font-weight: 600;
-						color: #FF2C43;
-						
-					}
-				}
-				.title {
-					font-size: 17px;
-					font-weight: 600;
-					width: 100%;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					overflow: hidden;
-				}
-				.prizes {
-					display: grid;
-					grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-					
-					.prize {
-						border-radius: 4px;
-						width: 10vw;
-						height: 10vw;
-						margin-right: 5px;
-					}
-				}
-				.tags {
-					position: absolute;
-					right: -1px;
-					bottom: -2px;
-					display: flex;
-					flex-direction: row-reverse;
-					justify-content: flex-end;
-					
-					.tag {
-						position: relative;
-						width: 50px;
-						height: 20px;
-					}
-					.tag_0 {
-						z-index: 3;
-					}
-					.tag_1 {
-						right: -9px;
-						z-index: 2;
-					}
-					.tag_2 {
-						right: -18px;
-						z-index: 1;
-					}
-				}
-			}
-			
-		}
-	}
-	.list2 {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		grid-gap: 10px;
-		padding: 10px;
-		width: calc(100% - 20px);
-		
-		.ka {
-			width: calc(50vw - 15px);
-			box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.1);
-			border-radius: 10px;
-			// height: 60vw;
-			
-			.top {
-				// height: 60vw;
-				background: linear-gradient(180deg, #FAF1A7 0%, #FFE456 100%);
-				text-align: center;
-				display: flex;
-				justify-content: center;
-				
-				image {
-					width: 80%;
-					height: 50vw;
-					// height: 50vw;
-				}
-			}
-			.ka-info {
-				padding: 10px;
-				
-				.ka-name {
-					font-size: 15px;
-					font-weight: 600;
-					width: 100%;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-				.row {
-					position: relative;
-					margin-top: 5px;
-					display: flex;
-					justify-content: space-between;
-					
-					.tag {
-						
-					}
-					.money {
-						font-size: 12px;
-						font-weight: 600;
-						color: #FF2C43;
-					}
-				}
-			}
-		}
-	}
-	.three {
-		grid-template-columns: 1fr 1fr 1fr;
-		
-		.ka {
-			width: 100%;
-			.top {
-				image {
-					width: 80%;
-					height: 30vw;
-				}
-			}
-			.ka-info {
-				padding: 5px 5px 10px 5px;
-				.ka-name {
-					font-size: 12px;
-				}
-				.row {
-					margin-top: 2px;
-					justify-content: flex-end;
-					.tag {
-						display: none;
-					}
+.swiperItem {
+  width: 100%;
+  height: 100%;
+}
+.tabs {
+  margin: 10px 0;
+  height: 36px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
 
-				}
-			}
-		}
-	}
-</style>
+  .tab {
+    .tabImg {
+      width: 18vw;
+      height: 100%;
+    }
+  }
+}
+.list {
+  padding: 10px;
+
+  .kabk {
+    padding: 1px;
+    background: linear-gradient(180deg, rgba(211, 74, 216, 0.3) 0%, rgba(58, 67, 207, 0.3) 25%);
+    border-radius: 13px;
+    box-shadow: 1px 1px 4px rgba(176, 123, 255, 0.5);
+    margin-bottom: 10px;
+    overflow: hidden;
+  }
+  .ka1 {
+    padding: 10px;
+    display: flex;
+    background: #fff;
+    border-radius: 12px;
+    position: relative;
+
+    .leftImg {
+      width: 30vw;
+      height: 30vw;
+      border-radius: 10px;
+      margin-right: 8px;
+    }
+    .rightInfo {
+      flex: 1;
+
+      .row {
+        margin-bottom: 5px;
+
+        .price {
+          font-size: 14px;
+          font-weight: 600;
+          color: #ff2c43;
+        }
+      }
+      .title {
+        font-size: 17px;
+        font-weight: 600;
+        width: 100%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .prizes {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+
+        .prize {
+          border-radius: 4px;
+          width: 10vw;
+          height: 10vw;
+          margin-right: 5px;
+        }
+      }
+      .tags {
+        position: absolute;
+        right: -1px;
+        bottom: -2px;
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+
+        .tag {
+          position: relative;
+          width: 50px;
+          height: 20px;
+        }
+        .tag_0 {
+          z-index: 3;
+        }
+        .tag_1 {
+          right: -9px;
+          z-index: 2;
+        }
+        .tag_2 {
+          right: -18px;
+          z-index: 1;
+        }
+      }
+    }
+  }
+}
+.list2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 10px;
+  padding: 10px;
+  width: calc(100% - 20px);
+
+  .ka {
+    width: calc(50vw - 15px);
+    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    // height: 60vw;
+
+    .top {
+      // height: 60vw;
+      background: linear-gradient(180deg, #faf1a7 0%, #ffe456 100%);
+      text-align: center;
+      display: flex;
+      justify-content: center;
+
+      image {
+        width: 80%;
+        height: 50vw;
+        // height: 50vw;
+      }
+    }
+    .ka-info {
+      padding: 10px;
+
+      .ka-name {
+        font-size: 15px;
+        font-weight: 600;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .row {
+        position: relative;
+        margin-top: 5px;
+        display: flex;
+        justify-content: space-between;
+
+        .tag {
+        }
+        .money {
+          font-size: 12px;
+          font-weight: 600;
+          color: #ff2c43;
+        }
+      }
+    }
+  }
+}
+.three {
+  grid-template-columns: 1fr 1fr 1fr;
+
+  .ka {
+    width: 100%;
+    .top {
+      image {
+        width: 80%;
+        height: 30vw;
+      }
+    }
+    .ka-info {
+      padding: 5px 5px 10px 5px;
+      .ka-name {
+        font-size: 12px;
+      }
+      .row {
+        margin-top: 2px;
+        justify-content: flex-end;
+        .tag {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>