From 9dda08a1b1701ee6adeb5d5aa2f6f260b301728c Mon Sep 17 00:00:00 2001
From: Waiting <waitinghc@foxmail.com>
Date: Thu, 14 Mar 2024 18:23:33 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6=EF=BC=8C=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86=EF=BC=8C=E8=AE=A2=E5=8D=95=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                                |  12 +
 src/pages/common/groupbuy/index.vue           |  11 +
 src/pages/home/index.vue                      |   4 +-
 src/pages/mall/index.vue                      |   2 +-
 .../mall/subs/components/coupon-dialog.vue    | 120 +++++++++
 .../mall/subs/components/coupon-item.vue      | 111 ++++++++
 src/pages/mall/subs/goods/goods-detail.vue    |   3 +-
 src/pages/mall/subs/order/order-confirm.vue   |   9 +-
 src/pages/mall/subs/shoppingcart/index.vue    | 237 ++++++++++++++++++
 src/pages/mine/index.vue                      |   2 +-
 .../integral/components/integral-item.vue     |  45 ++++
 src/pages/mine/subs/integral/index.vue        |  53 ++++
 src/static/images/ic_arrow_down_gray.png      | Bin 0 -> 641 bytes
 src/static/images/ic_checkbox_active_red.png  | Bin 0 -> 4171 bytes
 14 files changed, 602 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/common/groupbuy/index.vue
 create mode 100644 src/pages/mall/subs/components/coupon-dialog.vue
 create mode 100644 src/pages/mall/subs/components/coupon-item.vue
 create mode 100644 src/pages/mall/subs/shoppingcart/index.vue
 create mode 100644 src/pages/mine/subs/integral/components/integral-item.vue
 create mode 100644 src/pages/mine/subs/integral/index.vue
 create mode 100644 src/static/images/ic_arrow_down_gray.png
 create mode 100644 src/static/images/ic_checkbox_active_red.png

diff --git a/src/pages.json b/src/pages.json
index 0b9af70..ab4820d 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -79,6 +79,12 @@
           "style": {
             "navigationBarTitleText": "确认订单"
           }
+        },
+        {
+          "path": "shoppingcart/index",
+          "style": {
+            "navigationBarTitleText": "购物车"
+          }
         }
       ]
     },
@@ -91,6 +97,12 @@
             "navigationBarTitleText": "会员信息"
           }
         },
+        {
+          "path": "integral/index",
+          "style": {
+            "navigationBarTitleText": "我的积分"
+          }
+        },
         {
           "path": "recharge/index",
           "style": {
diff --git a/src/pages/common/groupbuy/index.vue b/src/pages/common/groupbuy/index.vue
new file mode 100644
index 0000000..f45039f
--- /dev/null
+++ b/src/pages/common/groupbuy/index.vue
@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script lang='ts' setup>
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index bb90f83..b2731b6 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -17,12 +17,12 @@
       <view class='user-info-card'>
         <image class='user-avatar' :src='userInfo.image' mode='aspectFill' />
         <text class='user-name primary-text-color'>{{ userInfo?.nickName }}</text>
-        <view class='integral-view primary-text-color'>
+        <view class='integral-view primary-text-color' @click.stop='goPath("/pages/mine/subs/integral/index")'>
           <text>{{ userInfo?.integration }}</text>
           <text>积分</text>
         </view>
         <view class='divider' style='height: 83rpx' />
-        <view class='balance-view'>
+        <view class='balance-view' @click.stop='goPath("/pages/mine/subs/recharge/index")'>
           <text class='accent-text-color'>{{ userInfo?.balance }}</text>
           <text>余额（元）</text>
         </view>
diff --git a/src/pages/mall/index.vue b/src/pages/mall/index.vue
index 3af04dd..901ebda 100644
--- a/src/pages/mall/index.vue
+++ b/src/pages/mall/index.vue
@@ -29,7 +29,7 @@
       </scroll-view>
     </view>
 
-    <view class='shopping-cart'>
+    <view class='shopping-cart' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
       <image :src='assetsUrl("ic_shopping_cart.png")' />
       <text>10</text>
     </view>
diff --git a/src/pages/mall/subs/components/coupon-dialog.vue b/src/pages/mall/subs/components/coupon-dialog.vue
new file mode 100644
index 0000000..09fbecd
--- /dev/null
+++ b/src/pages/mall/subs/components/coupon-dialog.vue
@@ -0,0 +1,120 @@
+<template>
+  <uni-popup type='bottom' ref='popupRef' :mask-click='false'>
+    <view class='popup-content c-flex-column'>
+      <view class='c-flex-row'>
+        <text>优惠券</text>
+        <text @click.stop='close'>确定</text>
+      </view>
+
+      <scroll-view>
+        <coupon-item v-for='item in coupons' :item='item' />
+      </scroll-view>
+    </view>
+  </uni-popup>
+</template>
+
+<script lang='ts' setup>
+import CouponItem from '../components/coupon-item.vue';
+
+const popupRef = ref();
+const coupons = [{
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 100,
+  threshold: 10,
+  priceDesc: '满100减10',
+  useTime: '2021-12-31',
+  status: 1,
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 200,
+  threshold: 80,
+  priceDesc: '满100减10',
+  useTime: '2021-01-01',
+  status: 1,
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 300,
+  threshold: 60,
+  priceDesc: '满100减10',
+  useTime: '2023-12-31',
+  status: '0',
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 50,
+  threshold: 50,
+  priceDesc: '满100减10',
+  useTime: '2021-10-31',
+  status: 0,
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满1000减30',
+  price: 200,
+  threshold: 30,
+  priceDesc: '满100减10',
+  useTime: '2024-12-31',
+  status: 0,
+  useStatus: '未使用'
+}];
+
+const show = () => {
+  popupRef.value.open();
+};
+
+const close = () => {
+  popupRef.value.close();
+};
+
+defineExpose({
+  show
+});
+</script>
+
+<style lang='scss' scoped>
+.popup-content {
+  background: #FFFFFF;
+  border-radius: 20rpx 20rpx 0 0;
+  padding: 38rpx 45rpx 0 45rpx;
+
+  view:nth-of-type(1) {
+    display: flex;
+    margin-bottom: 70rpx;
+    position: relative;
+
+    text:nth-of-type(1) {
+      font-weight: bold;
+      font-size: 30rpx;
+      color: #333333;
+      position: absolute;
+      left: 0;
+      right: 0;
+      text-align: center;
+    }
+
+    text:nth-of-type(2) {
+      font-weight: bold;
+      font-size: 30rpx;
+      color: #F32B2B;
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  scroll-view {
+    max-height: 600rpx;
+  }
+
+}
+</style>
diff --git a/src/pages/mall/subs/components/coupon-item.vue b/src/pages/mall/subs/components/coupon-item.vue
new file mode 100644
index 0000000..7b13d98
--- /dev/null
+++ b/src/pages/mall/subs/components/coupon-item.vue
@@ -0,0 +1,111 @@
+<template>
+  <view class='coupon-content'>
+    <image v-if='item.status==0' :src='assetsUrl("bg_coupon.png")' />
+    <image v-else-if='item.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
+    <view class='left-content accent-text-color' :class='{"left-content-disabled": item.status==1}'>
+      <text>{{ item.price }}</text>
+      <text>满{{ item.threshold }}元可用</text>
+    </view>
+
+    <view class='right-content accent-text-color' :class='{"right-content-disabled": item.status==1}'>
+      <text>{{ item?.title }}</text>
+      <text>有效期至{{ item.useTime }}</text>
+      <image class='checkbox' :src='assetsUrl("ic_checkbox_active.png")' />
+    </view>
+  </view>
+
+</template>
+
+<script lang='ts' setup>
+
+import { assetsUrl } from '@/utils/assets';
+
+defineProps({
+  item: Object
+});
+</script>
+
+<style lang='scss' scoped>
+.coupon-content {
+  display: flex;
+  flex-direction: row;
+  height: 200rpx;
+  position: relative;
+  margin: 10rpx 0 10rpx 0;
+
+  image {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  .left-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    padding-left: 50rpx;
+
+    text:nth-of-type(1) {
+      font-size: 55rpx;
+      font-weight: bold;
+    }
+
+    text:nth-of-type(1):after {
+      content: '元';
+      font-size: 24rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 26rpx;
+      font-weight: 400;
+    }
+  }
+
+  .left-content-disabled {
+    @extend .left-content;
+    color: #C2C2C2;
+  }
+
+  .right-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex: 1;
+    justify-content: center;
+    margin-left: 100rpx;
+
+    text:nth-of-type(1) {
+      font-size: 30rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 26rpx;
+      margin-top: 20rpx;
+      color: #333333;
+    }
+
+    .checkbox {
+      display: flex;
+      width: 42rpx;
+      height: 42rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      position: absolute;
+      right: 36rpx;
+    }
+  }
+
+  .right-content-disabled {
+    @extend .right-content;
+    color: #C2C2C2;
+
+    text:nth-of-type(2) {
+      color: #C2C2C2;
+    }
+  }
+}
+
+</style>
diff --git a/src/pages/mall/subs/goods/goods-detail.vue b/src/pages/mall/subs/goods/goods-detail.vue
index 7c22bcd..c5ed4e0 100644
--- a/src/pages/mall/subs/goods/goods-detail.vue
+++ b/src/pages/mall/subs/goods/goods-detail.vue
@@ -63,7 +63,7 @@
         </view>
 
         <view class='small-button-item'>
-          <view class='shoppingcart-count'>
+          <view class='shoppingcart-count' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
             <image :src='assetsUrl("ic_goods_shoppingcart.png")' />
             <text>12</text>
           </view>
@@ -78,7 +78,6 @@
     </view>
   </view>
   <sku-dialog ref='skuDialogRef' />
-
 </template>
 
 <script lang='ts' setup>
diff --git a/src/pages/mall/subs/order/order-confirm.vue b/src/pages/mall/subs/order/order-confirm.vue
index 685f3f2..f47cf75 100644
--- a/src/pages/mall/subs/order/order-confirm.vue
+++ b/src/pages/mall/subs/order/order-confirm.vue
@@ -62,7 +62,7 @@
         <text class='card-view-title'>运费</text>
         <text class='card-view-value'>￥8</text>
       </view>
-      <view class='c-flex-row'>
+      <view class='c-flex-row' @click.stop='showCouponDialog'>
         <text class='card-view-title'>优惠券
           <text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
         </text>
@@ -95,12 +95,15 @@
     </view>
   </view>
   <payment-dialog ref='paymentDialogRef' @change='args => paymentType=args' />
+  <coupon-dialog ref='couponDialogRef' />
 </template>
 
 <script lang='ts' setup>
 import { assetsUrl } from '@/utils/assets';
 import PaymentDialog from '../components/payment-dialog.vue';
+import CouponDialog from '@/pages/mall/subs/components/coupon-dialog.vue';
 
+const couponDialogRef = ref();
 const paymentDialogRef = ref();
 const paymentType = ref(0);
 const tabIndex = ref(0);
@@ -110,6 +113,10 @@ const changePayment = () => {
   paymentDialogRef.value.show();
 };
 
+const showCouponDialog = () => {
+  couponDialogRef.value.show();
+};
+
 const payment = () => {
 
 };
diff --git a/src/pages/mall/subs/shoppingcart/index.vue b/src/pages/mall/subs/shoppingcart/index.vue
new file mode 100644
index 0000000..6a3cdeb
--- /dev/null
+++ b/src/pages/mall/subs/shoppingcart/index.vue
@@ -0,0 +1,237 @@
+<template>
+  <view class='content'>
+    <view class='c-flex-row'>
+      <text class='manage' @click.stop='isEditMode = !isEditMode'>管理</text>
+    </view>
+
+    <view class='card-view'>
+      <scroll-view>
+        <view class='c-flex-column' v-for='(item, index) in [1,2,3,5]' :key='index'>
+          <view class='c-flex-row'>
+            <image v-show='isEditMode' class='checkbox' :src='assetsUrl("ic_checkbox_active_red.png")' />
+            <image class='goods-image' :src='assetsUrl("test_bg.png")' />
+            <view class='c-flex-column'>
+              <text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装
+              </text>
+              <view class='sku-view'>
+                <text>紫色，120cm x1</text>
+                <image :src='assetsUrl("ic_arrow_down_gray.png")' />
+              </view>
+              <text>￥29.90</text>
+              <view class='count-change-view c-flex-row'>
+                <view class='count-image' @click.stop='countChange(false)'>
+                  <image :src='assetsUrl("ic_reduce.png")' />
+                </view>
+                <text>{{ goodsCount }}</text>
+                <view class='count-image' @click.stop='countChange(true)'>
+                  <image :src='assetsUrl("ic_plus.png")' />
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <view class='bottom-view c-flex-row'>
+      <view class='c-flex-row' @click.stop='checkedAll = !checkedAll'>
+        <image :src='assetsUrl(checkedAll?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
+        <text>全选</text>
+      </view>
+      <view style='flex: 1' />
+      <text>合计：
+        <text>￥29.90</text>
+      </text>
+      <text class='settlement' @click.stop='settlement'>结算</text>
+    </view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+
+import { assetsUrl } from '@/utils/assets';
+
+const isEditMode = ref(false);
+const checkedAll = ref(false);
+const goodsCount = ref(1);
+
+const countChange = (isPlus: Boolean) => {
+
+};
+
+const settlement = () => {
+
+};
+</script>
+
+<style lang='scss' scoped>
+.content {
+  position: relative;
+
+  .manage {
+    width: 100%;
+    font-weight: 400;
+    font-size: 30rpx;
+    color: #333333;
+    background: #FFFFFF;
+    align-self: flex-end;
+    padding: 20rpx 30rpx;
+    text-align: end;
+  }
+
+  .card-view {
+    margin: 30rpx;
+    border-radius: 10rpx;
+    background: #FFFFFF;
+    padding: 10rpx 20rpx 20rpx 17rpx;
+
+    .c-flex-column:nth-of-type(1) {
+      margin: 20rpx 0;
+    }
+
+    view:nth-of-type(1) {
+      .checkbox {
+        width: 35rpx;
+        height: 35rpx;
+        margin-right: 20rpx;
+      }
+
+      .goods-image {
+        width: 186rpx;
+        height: 186rpx;
+        border-radius: 10rpx;
+      }
+
+      .c-flex-column {
+        flex: 1;
+        height: 186rpx;
+        margin-left: 20rpx;
+        position: relative;
+
+        text:nth-of-type(1) {
+          font-weight: 400;
+          font-size: 28rpx;
+          color: #333333;
+          -webkit-line-clamp: 2;
+          text-overflow: ellipsis;
+        }
+
+        .sku-view {
+          display: flex;
+          flex-direction: row;
+          width: 210rpx;
+          position: relative;
+          background: #F2F2F2;
+          margin-top: 10rpx;
+          align-items: center;
+          border-radius: 22rpx;
+          padding: 5rpx 20rpx;
+
+          text {
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #999999;
+          }
+
+          image {
+            width: 20rpx;
+            height: 20rpx;
+            margin-left: 13rpx;
+          }
+        }
+
+        text:nth-of-type(2) {
+          display: flex;
+          font-weight: bold;
+          font-size: 32rpx;
+          color: #333333;
+          margin-top: 20rpx;
+        }
+
+        .count-change-view {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+
+          .count-image {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 54rpx;
+            height: 54rpx;
+            background: #FBFBFB;
+
+            image {
+              width: 15rpx;
+              height: 2rpx;
+            }
+          }
+
+          .count-image:nth-of-type(2) image {
+            width: 17rpx;
+            height: 17rpx;
+          }
+
+          text {
+            display: flex;
+            width: 54rpx;
+            height: 54rpx;
+            align-items: center;
+            justify-content: center;
+            font-weight: 400;
+            font-size: 30rpx;
+            color: #333333;
+            background: #F2F2F2;
+          }
+        }
+      }
+    }
+  }
+
+  .bottom-view {
+    background: #FFFFFF;
+    position: fixed;
+    padding: 12rpx 30rpx 78rpx 30rpx;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    image {
+      width: 35rpx;
+      height: 35rpx;
+    }
+
+    .c-flex-row:nth-of-type(1) {
+      text {
+        margin-left: 10rpx;
+        font-size: 28rpx;
+        color: #333333;
+      }
+    }
+
+    text:nth-of-type(1) {
+      font-size: 30rpx;
+      color: #333333;
+
+      text {
+        font-weight: bold;
+        font-size: 36rpx;
+        color: #F32B2B;
+      }
+    }
+
+    .settlement {
+      display: flex;
+      background: #F32B2B;
+      border-radius: 43rpx;
+      padding: 17rpx 75rpx;
+      font-weight: bold;
+      font-size: 30rpx;
+      color: #FFFFFF;
+      margin-left: 37rpx;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>
diff --git a/src/pages/mine/index.vue b/src/pages/mine/index.vue
index 062aa7a..6ebfe47 100644
--- a/src/pages/mine/index.vue
+++ b/src/pages/mine/index.vue
@@ -18,7 +18,7 @@
       </view>
 
       <view class='bottom-row'>
-        <view>
+        <view @click.stop='goPath("/pages/mine/subs/integral/index")'>
           <text>{{ userInfo.integration }}</text>
           <text>积分</text>
         </view>
diff --git a/src/pages/mine/subs/integral/components/integral-item.vue b/src/pages/mine/subs/integral/components/integral-item.vue
new file mode 100644
index 0000000..9e71565
--- /dev/null
+++ b/src/pages/mine/subs/integral/components/integral-item.vue
@@ -0,0 +1,45 @@
+<template>
+  <view class='card-view'>
+    <text class='category-title'>2023-02-12</text>
+    <view class='item c-flex-column' v-for='(item,index) in 3' :key='index'>
+      <view class='c-flex-row'>
+        <text class='primary-text-color' style='flex: 1'>消费</text>
+        <text class='accent-text-color'>-30</text>
+      </view>
+      <view class='c-flex-row'>
+        <text class='secondary-text-color' style='flex: 1'>2023-06-27 15:02:11</text>
+        <text style='color: #999999'>会员积分：￥30.00</text>
+      </view>
+      <view class='divider' style='margin-top: 20rpx'/>
+    </view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+defineProps({
+  item: Object
+});
+</script>
+
+<style lang='scss' scoped>
+.card-view {
+  display: flex;
+  flex-direction: column;
+  padding: 16rpx 23rpx 20rpx 30rpx;
+  margin: 20rpx 0;
+}
+
+.category-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333333;
+}
+
+.item {
+  margin: 10rpx 0;
+
+  view:nth-of-type(2) {
+    margin-top: 10rpx;
+  }
+}
+</style>
diff --git a/src/pages/mine/subs/integral/index.vue b/src/pages/mine/subs/integral/index.vue
new file mode 100644
index 0000000..15ceaa1
--- /dev/null
+++ b/src/pages/mine/subs/integral/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <view class='content'>
+    <view class='top-view c-flex-column'>
+      <text>2520</text>
+      <text>会员积分</text>
+    </view>
+    <text class='integral-detail-title'>积分明细</text>
+    <scroll-view style='margin: 10rpx 20rpx'>
+      <integral-item v-for='(item,index) in tradeList' :key='index' :item='item' />
+    </scroll-view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+import IntegralItem from '@/pages/mine/subs/integral/components/integral-item.vue';
+
+const tradeList = ref([1, 2, 3, 4, 5]);
+</script>
+
+<style lang='scss' scoped>
+
+.top-view {
+  height: 195rpx;
+  background: linear-gradient(#F32B2B, #F95D5D);
+  align-items: center;
+  justify-content: center;
+
+  text:nth-of-type(1) {
+    font-weight: 400;
+    font-size: 50rpx;
+    color: #FFFFFF;
+  }
+
+  text:nth-of-type(2) {
+    font-weight: 400;
+    font-size: 26rpx;
+    color: #FFFFFF;
+    margin-top: 10rpx;
+  }
+}
+
+.integral-detail-title {
+  margin: 20rpx 24rpx;
+  font-weight: bold;
+  font-size: 30rpx;
+  color: #333333;
+  position: relative;
+}
+
+scroll-view{
+  width: auto;
+}
+</style>
diff --git a/src/static/images/ic_arrow_down_gray.png b/src/static/images/ic_arrow_down_gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad104e56d53d73d995910846280554bb2d1d6fa1
GIT binary patch
literal 641
zcmV-{0)G98P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px%J4r-ARA@u(m_3LSK^TVL-6;$fmUo2+TG(hKHpi8MR+fT=r6NQj$!^kE-j#<W
z`DQ8!iq#<~Xr~}}90+1#C)R?MaCN%O+>Ok_-nz+cc4qPevsKug`Sy9fcQV;cgf%~+
zHRneVSayOTfslY@2f`AvY@qe@kbrdyEenJMEE{M&{Zs-;l3Zqto$vSizpN{JD$wb4
zHaX{iv+_lO?*O&{>=MzACx%*Od%fPZ$z-w*;0AyzMD$x1Dhhl9ux;+JG7<*<Er9EW
ztz4jF;L;_EOiHQyobz|3OGuwwC5f}(|64+t)hb9-fuAa%FSOh3t8pBE$gR7DEvKsR
zGX?a;Znt|$O8IG#67#^HDWC^5o6U_zqj9hZiFx5G3FtwsR_g*|OmDH-Hnu}VyR|m-
zDU<5JR~9f5=NMx@G6|*BGtT**3yHe$a|vXiNs|1`C6Us}PqvMO4SX#DJt;2{MbVSt
zaQLE*ge`n+fue+z@}Uso^*j<T;H?CT5&#|$(VHp~uHdZ&N+j+P(fe5vF5#UB6eZ#~
zzB?EUK9)(ihIb}lB=i=0Q-79H-WEc9$xHZvcPd~c^6wM3i0DwC_XY1<z({-saOYp~
zD0;4xI?~UE04@SJQc69|KhIbB($5;><zI<3O<yXd9u;o<RZ5u(A@ovnc6bpmN$7X#
z#{m8S*dLF_uSTQM*crJg<W0ae=(Ku4U{Re82`szQA%T#9rw)W|)Kg<CmkkM2Zk4Bj
bYoEX|=1N;YSW?7b00000NkvXXu0mjfV4)r^

literal 0
HcmV?d00001

diff --git a/src/static/images/ic_checkbox_active_red.png b/src/static/images/ic_checkbox_active_red.png
new file mode 100644
index 0000000000000000000000000000000000000000..317aee6b882030be8238d45bae4dfa7cecdd74b0
GIT binary patch
literal 4171
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
VR;&Gz#sUBU002ovPDHLkV1lv8zE}VN

literal 0
HcmV?d00001