feat(specialArea): add badge

pages/specialArea/list.vue

@@ -78,7 +78,22 @@
               class="fly"
               v-show="item.preSaleStatus == 3 || item.isSale == 1"
             ></view>
-            <img :src="item.cover1" class="cover" alt="" />
+            <view class="image-container">
+              <img :src="item.cover1" class="cover" alt="" />
+              <!-- 三角形角标 -->
+              <view class="triangle-badge" v-if="item.warnMessage">
+                <view
+                  class="triangle-badge-text"
+                  :class="{
+                    'text-2': item.warnMessage.length === 2,
+                    'text-3': item.warnMessage.length === 3,
+                    'text-4': item.warnMessage.length === 4,
+                  }"
+                >
+                  {{ item.warnMessage }}
+                </view>
+              </view>
+            </view>
             <view class="goodList_ir">
               <view>
                 <span class="qzbq" v-if="item.prefixLabelTarget != undefined">{{
@@ -707,4 +722,52 @@ export default {
   border-radius: 20px;
   font-size: 14px;
 }
+
+.image-container {
+  position: relative;
+}
+
+.triangle-badge {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  border-top: 90rpx solid #005bac;
+  border-right: 90rpx solid transparent;
+  border-radius: 10rpx 0 0 0;
+  z-index: 10;
+}
+
+.triangle-badge-text {
+  position: absolute;
+  color: #ffffff;
+  font-weight: 600;
+  line-height: 1;
+  transform: rotate(-45deg);
+  transform-origin: center;
+  white-space: nowrap;
+  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
+}
+
+/* 2个字样式 */
+.triangle-badge-text.text-2 {
+  top: -68rpx;
+  left: 10rpx;
+  font-size: 22rpx;
+}
+
+/* 3个字样式 */
+.triangle-badge-text.text-3 {
+  top: -68rpx;
+  left: 4rpx;
+  font-size: 20rpx;
+}
+
+/* 4个字样式 */
+.triangle-badge-text.text-4 {
+  top: -64rpx;
+  left: 0rpx;
+  font-size: 18rpx;
+}
 </style>