feat: 完善芝麻购买页

apps/bigmember_pc/src/components/common/SpecCard.vue

@@ -87,11 +87,10 @@ export default {
       bottom: -1px;
     }
     .float-tip {
-      left: -1px;
-      top: -12px;
+      left: 0;
+      top: 0;
       padding-right: 8px;
-      border-radius: 2px;
-      border-top-right-radius: 10px;
+      border-radius: 6px 2px 8px 2px;
     }
   }
 

apps/bigmember_pc/src/store/order.js

@@ -419,11 +419,125 @@ export default {
       commit('updateLoadingStatus', {
         product: true
       })
+
+      const ttt = {
+        "error_code": 0,
+        "error_msg": "",
+        "data": [
+          {
+            "title": "芝麻信用共建分析报告",
+            "desc": "芝麻信用共建分析报告",
+            "extend": {
+              "151": {
+                "1511": {
+                  "pack_type": 0,
+                  "specsUnit": "份",
+                  "validityYear": 3
+                },
+                "1512": {
+                  "day": 30,
+                  "first": 299,
+                  "id": 1512,
+                  "number": 20,
+                  "pack_type": 1,
+                  "price": 999,
+                  "specsUnit": "份"
+                },
+                "1513": {
+                  "day": 90,
+                  "first": 299,
+                  "id": 1513,
+                  "number": 30,
+                  "pack_type": 2,
+                  "price": 1666,
+                  "specsUnit": "份"
+                },
+                "1514": {
+                  "day": 365,
+                  "first": 299,
+                  "id": 1514,
+                  "number": 40,
+                  "pack_type": 3,
+                  "price": 3888,
+                  "specsUnit": "份"
+                }
+              }
+            },
+            "productId": 151,
+            "sku": [
+              {
+                "productId": 1511,
+                "name": "芝麻信用共建分析报告下载包",
+                "info": "单份",
+                "choosed": false,
+                "lotteryId": 0,
+                "activityId": 0,
+                "originalPrice": 99900,
+                "discountPrice": 29900,
+                "discountAmount": 70000,
+                "activity": null
+              },
+              {
+                "productId": 1512,
+                "name": "芝麻信用共建分析报告下载包",
+                "info": "月卡",
+                "choosed": false,
+                "lotteryId": 0,
+                "activityId": 0,
+                "originalPrice": 199900,
+                "discountPrice": 99900,
+                "discountAmount": 100000,
+                "activity": null
+              },
+              {
+                "productId": 1513,
+                "name": "芝麻信用共建分析报告下载包",
+                "info": "季卡",
+                "choosed": false,
+                "lotteryId": 0,
+                "activityId": 0,
+                "originalPrice": 339900,
+                "discountPrice": 166600,
+                "discountAmount": 173300,
+                "activity": null
+              },
+              {
+                "productId": 1514,
+                "name": "芝麻信用共建分析报告下载包",
+                "info": "年卡",
+                "choosed": false,
+                "lotteryId": 0,
+                "activityId": 0,
+                "originalPrice": 788800,
+                "discountPrice": 388800,
+                "discountAmount": 400000,
+                "activity": null
+              }
+            ],
+            "extend1": {
+              "1511": {
+                "is_first": true
+              },
+              "1512": {
+                "is_first": true
+              },
+              "1513": {
+                "is_first": true
+              },
+              "1514": {
+                "is_first": true
+              }
+            }
+          }
+        ]
+      }
+
       const {
         data = [],
         error_msg: msg,
         error_code: code
-      } = await ajaxGetProductInfo(params)
+      } = ttt
+      // await ajaxGetProductInfo(params)
       if (code === 0 && data) {
         // 更新产品类型、规格信息
         commit('setProductInfoList', formatProductInfo(data))

apps/bigmember_pc/src/views/order/components/analysis-report/info.vue

@@ -14,21 +14,31 @@
             <template #spec-label='{ item }'>
               <div class='spec-c-label flex flex-(row items-center)'>
                 <span>{{item.label}}</span>
-                <span class='vip-label'>
+                <span class='vip-label' :class='{ [item.packLevel]: true }' v-if='item.pack'>
                   <i class='iconfont icon-vip'></i>
                 </span>
               </div>
             </template>
             <template #spec-footer='{ item }'>
-              <div class='spec-first-tip' v-if='item.tipText'>首购立享会员特价</div>
-              <div class='spec-card-tip flex flex-(col items-center justify-center)'>
+              <div class='spec-card-tip flex flex-(col items-center justify-center)' v-if='item.pack'>
                 <div class='spec-card-tip--date flex flex-(row items-center)'>
-                  <span class='spec-card-tip--day'>365天</span>
+                  <span class='spec-card-tip--day flex-shrink-0'>{{item._extend.day}}天</span>
                   <span class='spec-line'></span>
-                  <div>免费下载：<span class='highlight-text'>20份</span> /月</div>
+                  <div class='flex-shrink-0'>免费下载：<span class='highlight-text'>{{item._extend.number}}{{item._extend.specsUnit}}</span> /月</div>
                 </div>
-                <div class='spec-card-tip--desc'>若本月报告下载超出额度，<br>时效内享特价：<span class='highlight-text'>299元/份</span></div>
+                <div class='spec-card-tip--desc'>若本月报告下载超出额度，<br>时效内享特价：<span class='highlight-text'>{{item._extend.first}}元/{{item._extend.specsUnit}}</span></div>
               </div>
+              <div v-else>
+                <div class='flex flex-(col items-center)' v-if='useNowState.inPack'>
+                  <div class='spec-first-tip'>您正在享受权益特价优惠</div>
+                </div>
+                <div class='flex flex-(col items-center)' v-if='!useNowState.inPack && !useNowState.isFirstBuy'>
+                  <div class='spec-first-tip'>开通优惠卡享特价：299</div>
+                  <span class='spec-first-tip--expire' v-if='useNowState.isBuyPackExpire'>会员已过期：{{useNowState.buyPackExpireDay}}天</span>
+                </div>
+                <div class='spec-first-tip' v-if='!useNowState.inPack && useNowState.isFirstBuy'>首购立享会员特价</div>
+              </div>
+
             </template>
           </order-spec-list>
         </div>
@@ -72,11 +82,31 @@ export default {
       'productOrderAmount',
       'productInfo'
     ]),
+    // 返回当前权益状态
+    useNowState () {
+      return {
+        // 购买权益包生效中
+        inPack: false,
+        // 权益包余额
+        packCount: -1,
+        packTime: '',
+        // 之前买过权益包并过期
+        isBuyPackExpire: false,
+        buyPackExpireDay: 88,
+        // 是否首次购买优惠
+        isFirstBuy: false
+      }
+    },
     isFirstBuy () {
       return this.productInfo?.extend1?.[this.specActiveInfo.id]?.is_first
     },
     // 格式化商品规格
     specList() {
+      const idMap = {
+        1512: 'monthly-theme',
+        1513: 'seasonal-theme',
+        1514: 'year-theme',
+      }
       return this.productSpecInfoList.map((spec) => {
         const isFirstBuy = this.productInfo?.extend1?.[spec.productId]?.is_first
         const result = {
@@ -85,12 +115,19 @@ export default {
           desc: spec.originalPrice > spec.discountPrice ? `<span class='underline-price'>原价：${formatNumber(spec.originalPrice / 100)}元/份</span>` : '',
           tipText: spec._format.tag,
           id: spec.productId,
-          _data: spec
+          pack: spec.productId !== 1511,
+          packLevel: idMap[spec.productId] || '',
+          _data: spec,
+          _extend: this.productInfo?.extend[151]?.[spec.productId] || {},
         }
-        if (isFirstBuy) {
+        if (isFirstBuy && !result.pack) {
           result.tipText = '首购推荐'
+          result.tipText = '权益特价'
           result.activeClass = 'orange-theme'
         }
+        if (!isFirstBuy && result.packLevel === 'year-theme') {
+          result.tipText = '推荐'
+        }
         return result
       })
     },
@@ -128,7 +165,8 @@ export default {
       submitText: '立即购买'
     })
     // 设置默认规格的扩展信息
-    this.doSetSpec(this.productSpecInfo.productId)
+    // 首购优惠时默认选中单份，没有时默认选中年卡
+    this.doSetSpec(1514 || this.productSpecInfo.productId)
   },
   methods: {
     ...mapMutations('order', ['updateUI']),
@@ -189,6 +227,7 @@ export default {
         'target-before':  info.before,
         'target-name': info.name,
         'target-email': email,
+        'target-level': this.productSpecInfo.info,
         report_mold
       }))
     },
@@ -250,8 +289,36 @@ export default {
     .selector-card.s-line::after {
       background-color: transparent;
     }
+    .spec-list {
+      align-items: flex-start;
+
+      .spec-card {
+        &.active {
+          .float-tip {
+            top: -2px;
+          }
+        }
+        .float-tip {
+          top: -1px;
+          padding-right: 8px;
+          border-radius: 6px 2px 8px 2px;
+        }
+      }
+    }
+    .spec-list .spec-card:not(:last-of-type) {
+      margin-right: 40px;
+    }
     .spec-card {
+      width: 220px;
+      padding: 16px 10px;
       height: auto;
+      background-color: #F5F5FB;
+      &.active {
+        background-color: inherit;
+        .spec-card-tip--date {
+          background: #EAF8FA;
+        }
+      }
     }
     .underline-price {
       color: #999999;
@@ -270,6 +337,13 @@ export default {
       line-height: 22px;
       background: linear-gradient(98deg, #FF7C32 0%, #F33838 100%);
       color: #fff;
+      &--expire {
+        display: inline-block;
+        margin-top: 8px;
+        color: #999999;
+        font-size: 14px;
+        line-height: 22px;
+      }
     }
     .vip-label {
       display: inline-flex;
@@ -279,10 +353,21 @@ export default {
       height: 18px;
       background: #2abed1;
       border-radius: 8px 2px 8px 2px;
+      color: #fff;
+
+      &.monthly-theme {}
+      &.seasonal-theme {
+        background: #F1D090;
+        color: #1D1D1D;
+      }
+      &.year-theme {
+        background: #171826;
+        color: #FAE7CA;
+      }
 
       .icon-vip {
         display: inline-block;
-        color: #fff;
+        color: inherit;
         font-size: 18px;
         transform: scale(0.5);
       }

apps/mobile/src/store/modules/createOrder.js

@@ -441,11 +441,123 @@ export default {
       commit('updateLoadingStatus', {
         product: true
       })
+      const ttt = {
+        "error_code": 0,
+        "error_msg": "",
+        "data": [
+          {
+            "title": "芝麻信用共建分析报告",
+            "desc": "芝麻信用共建分析报告",
+            "extend": {
+              "151": {
+                "1511": {
+                  "pack_type": 0,
+                  "specsUnit": "份",
+                  "validityYear": 3
+                },
+                "1512": {
+                  "day": 30,
+                  "first": 299,
+                  "id": 1512,
+                  "number": 20,
+                  "pack_type": 1,
+                  "price": 999,
+                  "specsUnit": "份"
+                },
+                "1513": {
+                  "day": 90,
+                  "first": 299,
+                  "id": 1513,
+                  "number": 30,
+                  "pack_type": 2,
+                  "price": 1666,
+                  "specsUnit": "份"
+                },
+                "1514": {
+                  "day": 365,
+                  "first": 299,
+                  "id": 1514,
+                  "number": 40,
+                  "pack_type": 3,
+                  "price": 3888,
+                  "specsUnit": "份"
+                }
+              }
+            },
+            "productId": 151,
+            "sku": [
+              {
+                "productId": 1511,
+                "name": "芝麻信用共建分析报告下载包",
+                "info": "单份",
+                "choosed": false,
+                "lotteryId": 0,
+                "activityId": 0,
+                "originalPrice": 99900,
+                "discountPrice": 29900,
+                "discountAmount": 70000,
+                "activity": null
+              },
+              {
+                "productId": 1512,
+                "name": "芝麻信用共建分析报告下载包",
+                "info": "月卡",
+                "choosed": false,
+                "lotteryId": 0,
+                "activityId": 0,
+                "originalPrice": 199900,
+                "discountPrice": 99900,
+                "discountAmount": 100000,
+                "activity": null
+              },
+              {
+                "productId": 1513,
+                "name": "芝麻信用共建分析报告下载包",
+                "info": "季卡",
+                "choosed": false,
+                "lotteryId": 0,
+                "activityId": 0,
+                "originalPrice": 339900,
+                "discountPrice": 166600,
+                "discountAmount": 173300,
+                "activity": null
+              },
+              {
+                "productId": 1514,
+                "name": "芝麻信用共建分析报告下载包",
+                "info": "年卡",
+                "choosed": false,
+                "lotteryId": 0,
+                "activityId": 0,
+                "originalPrice": 788800,
+                "discountPrice": 388800,
+                "discountAmount": 400000,
+                "activity": null
+              }
+            ],
+            "extend1": {
+              "1511": {
+                "is_first": true
+              },
+              "1512": {
+                "is_first": true
+              },
+              "1513": {
+                "is_first": true
+              },
+              "1514": {
+                "is_first": true
+              }
+            }
+          }
+        ]
+      }
       const {
         data = [],
         error_msg: msg,
         error_code: code
-      } = await ajaxGetProductInfo(params)
+      } = ttt
+//        await ajaxGetProductInfo(params)
       if (code === 0 && data) {
         // 更新产品类型、规格信息
         commit('setProductInfoList', formatProductInfo(data))

apps/mobile/src/views/create-order/components/analysis-report/HeaderAdsense.vue

@@ -50,8 +50,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .header-show-group {
-  background: linear-gradient(269.56deg, #f2fffe 0.07%, #fbffff 100%);
-  padding: 12px 0;
+  background: linear-gradient(180deg, #FBFFFF 0%, #DAFFFF 100%);
+  padding: 12px 0 24px;
 
   .jy-zhima-logo {
     width: 235px;

apps/mobile/src/views/create-order/components/analysis-report/ProductionCard.vue

@@ -1,37 +1,39 @@
 <template>
   <div class="production-card analysis-report-production-card">
-    <div class='buy-item flex flex-(row items-center justify-between)'>
-      <div class='flex flex-(row items-center)'>
-        <span class='buy-tip--label'>单份购买</span>
-        <div class="activity-badge" v-if="isBuyFirst">
-          <span class="j-icon icon-crown" />&nbsp;首购特惠
-        </div>
-      </div>
-      <div class='buy-tip--price'>
-        <span class="spec-i-text del" v-if='oneSpec.origin > oneSpec.now'>￥{{ (oneSpec.origin) }}</span>
-        <span class="spec-i-text active-price">￥{{ (oneSpec.now) }}</span>
-      </div>
-    </div>
-    <div class="report-info">
-      <van-form ref="formRef">
-        <van-field
-          v-model="info.email"
-          required
-          name="pattern"
-          label="邮箱地址"
-          placeholder="请输入您的邮箱地址"
-          :show-error="false"
-          :rules="[
+    <div class='product-top'>
+      <div class="report-info">
+        <van-form ref="formRef">
+          <van-field
+            v-model="info.email"
+            required
+            name="pattern"
+            label="邮箱地址"
+            placeholder="请输入您的邮箱地址"
+            :show-error="false"
+            :rules="[
             { required: true, message: '请输入邮箱' },
             {
               pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
               message: '邮箱格式错误'
             } // 邮箱校验正则规则
           ]"
-          @blur="onBlur('email')"
-        />
-      </van-form>
+            @blur="onBlur('email')"
+          />
+        </van-form>
+      </div>
+      <div class='split-line'></div>
+      <div class='buy-item-list flex flex-(col items-center)'>
+        <analysis-report-production-spec-card
+          v-for='(spec, index) in specList'
+          :spec='spec'
+          :key='index'
+          :active='productSpec.id'
+          @select='specCardChange'
+        >
+        </analysis-report-production-spec-card>
+      </div>
     </div>
+
     <div class="report-tip">
       <div class="report-tip--title">购买须知</div>
       剑鱼平台产品与服务属于虚拟数字产品，鉴于服务的特殊性，一旦开通权益不支持退款，请确认无误后进行支付。
@@ -47,13 +49,13 @@ import { getPureNumber, openAppOrWxPage } from '@/utils'
 import { appCallOpenWindow } from '@/utils/callFn/appFn'
 import { creditReportEntSearch, creditReportTime } from '@/api/modules/'
 import orderActivityHelper from '@/utils/mixins/modules/order-activity-helper'
-import SpecList from '@/components/create-order/SpecList.vue'
 import { formatZhimaInfoSubmitParamsOfType, formatZhimaInfo } from '@/views/create-order/components/analysis-report/model/format'
+import AnalysisReportProductionSpecCard from '@/views/create-order/components/analysis-report/SpecCard.vue'
 
 export default {
   name: 'AnalysisReportProductionCard',
   components: {
-    SpecList,
+    AnalysisReportProductionSpecCard,
     [Form.name]: Form,
     [Field.name]: Field
   },
@@ -90,6 +92,11 @@ export default {
       'productSpecInfo'
     ]),
     specList() {
+      const idMap = {
+        1512: 'monthly-theme',
+        1513: 'seasonal-theme',
+        1514: 'year-theme',
+      }
       // 计算卡片价格
       return this.productSpecInfoList.map((spec, index) => {
         return {
@@ -103,7 +110,10 @@ export default {
           now: fen2Yuan(spec.discountPrice),
           tipText: spec._format.tag,
           tipType: 'gift', // gift/discount/'' 为空则显示默认的蓝色
-          _data: spec
+          _data: spec,
+          pack: spec.productId !== 1511,
+          packLevel: idMap[spec.productId] || '',
+          _extend: this.productInfo?.extend[151]?.[spec.productId] || {},
         }
       })
     },
@@ -179,6 +189,7 @@ export default {
         'target-before':  info.before,
         'target-name': info.name,
         'target-email': email,
+        'target-level': email,
         report_mold
       }))
     },
@@ -265,6 +276,19 @@ export default {
 
 <style lang="scss" scoped>
 .analysis-report-production-card {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  margin-top: -12px;
+  padding-bottom: 12px;
+
+  .product-top {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    background: #fff;
+    box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);
+    overflow: hidden;
+  }
+
   .report-func {
     padding: 12px 16px;
     background: #fff;
@@ -342,7 +366,6 @@ export default {
     }
   }
   .report-tip {
-    margin-top: 8px;
     padding: 12px 16px;
     font-size: 12px;
     line-height: 18px;
@@ -367,31 +390,16 @@ export default {
     font-size: 11px;
     line-height: 14px;
   }
-  .spec-i-text {
-    font-size: 12px;
-    color: #5f5e64;
-    line-height: 18px;
 
-    &.del {
-      text-decoration: line-through;
-    }
-  }
-  .buy-item {
-    margin-top: 8px;
-    background-color: #fff;
-    padding: 16px;
-  }
-  .buy-tip--label {
-    color: #171826;
-    font-size: 16px;
-    line-height: 24px;
-    margin-right: 8px;
+
+  .buy-item-list {
+    padding: 12px 12px 0;
+    background: linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 100%);
   }
-  .buy-tip--price {
-    .active-price {
-      font-size: 16px;
-      color: #FB483D;
-    }
+  .split-line {
+    height: 1px;
+    background: #f2f2f2;
+    margin: 0 12px;
   }
 }
 </style>

apps/mobile/src/views/create-order/components/analysis-report/SpecCard.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class='analysis-report-production-spec-card flex flex-(row items-center)' :class='{ "is-pack": spec.pack }' @click='$emit("select", spec.id)'>
+    <div class='buy-tip--price flex flex-(col items-center)'>
+      <span class="spec-i-text active-price"><span class='active-price-unit'>￥</span>{{ (spec.now) }}</span>
+      <span class="spec-i-text del" v-if='spec.origin > spec.now'>￥{{ (spec.origin) }}</span>
+    </div>
+    <div class='flex flex-(1 row items-center justify-between)'>
+      <div>
+        <div class='spec-c-label flex flex-(row items-center)'>
+          <span class='spec-name'>{{spec.label}}</span>
+          <span class='vip-label' :class='{ [spec.packLevel]: true }' v-if='spec.pack'>
+          <i class='iconfont icon-vip'></i>
+        </span>
+        </div>
+
+        <div>
+          <div class='spec-card-tip flex flex-(row items-center)' v-if='spec.pack'>
+            <span class='spec-card-tip--day flex-shrink-0'>{{spec._extend.day}}天</span>
+            <span class='spec-line'></span>
+            <div class='flex-shrink-0'>免费下载：<span>{{spec._extend.number}}{{spec._extend.specsUnit}}</span> /月</div>
+          </div>
+          <div v-else>
+            <span class='spec-i-text'>购买首份报告享特价 299 元</span>
+          </div>
+        </div>
+
+      </div>
+      <div>
+        <div class="check--actions">
+          <span class="check-icon iconfont icon-choose1" v-if='active === spec.id'></span>
+          <span class="check-icon iconfont icon-unchoose1" v-else></span>
+        </div>
+      </div>
+    </div>
+    <div class='spec-card-tip--fixed' v-if='spec.pack'>
+      <div class='spec-card-tip--desc'  :class='{ [spec.packLevel]: true }'>若本月报告下载超出额度，时效内享特价：<span>{{spec._extend.first}}元/{{spec._extend.specsUnit}}</span></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AnalysisReportProductionSpecCard',
+  props: {
+    spec: {
+      type: Object,
+      default: () => {}
+    },
+    active: {
+      type: Number,
+      default: -1
+    }
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+.analysis-report-production-spec-card {
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0px 4px 16px 0px rgba(8, 31, 38, 0.08);
+  background: #fff;
+  width: 100%;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  padding: 12px;
+  padding-left: 23px;
+  &.is-pack {
+    padding-bottom: 29px;
+  }
+
+  .spec-i-text {
+    font-size: 11px;
+    color: #5f5e64;
+    line-height: 16px;
+
+    &.del {
+      font-size: 10px;
+      line-height: 14px;
+      color: #9B9CA3;
+      text-decoration: line-through;
+    }
+  }
+
+  .buy-tip--price {
+    margin-right: 23px;
+    .active-price-unit {
+      font-size: 14px;
+    }
+    .active-price {
+      font-size: 22px;
+      line-height: 32px;
+      color: #FB483D;
+    }
+  }
+  .vip-label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
+    height: 18px;
+    background: #2abed1;
+    border-radius: 8px 2px 8px 2px;
+    color: #fff;
+
+    &.monthly-theme {}
+    &.seasonal-theme {
+      background: #F1D090;
+      color: #1D1D1D;
+    }
+    &.year-theme {
+      background: #171826;
+      color: #FAE7CA;
+    }
+
+    .icon-vip {
+      display: inline-block;
+      color: inherit;
+      font-size: 18px;
+      transform: scale(0.5);
+    }
+  }
+  .spec-card-tip {
+    margin-top: 10px;
+    .spec-line {
+      width: 1px;
+      height: 12px;
+      background: #E0E0E0;
+      margin: 0 6px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    &--day {
+      color: #1d1d1d;
+    }
+
+    &--fixed {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+    }
+    &--desc {
+      color: #2ABED1;
+      font-size: 10px;
+      line-height: 21px;
+      text-align: center;
+      width: 299px;
+      height: 21px;
+      margin: 0 auto;
+      background: url(@/assets/image/order/report/bg-monthly.png) no-repeat center;
+      background-size: contain;
+
+      &.seasonal-theme {
+        background-image: url(@/assets/image/order/report/bg-seasonal.png);
+        color: rgba(194, 111, 51, 1);
+      }
+      &.year-theme {
+        background-image: url(@/assets/image/order/report/bg-year.png);
+        color: #5F5E64;
+      }
+    }
+  }
+
+  .spec-c-label {
+    .spec-name {
+      font-size: 16px;
+      line-height: 24px;
+      color: #171826;
+    }
+  }
+  .check--actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: #2abed1;
+    .check-icon {
+      font-size: 24px;
+
+      &.icon-choose1 {
+        color: #2abed1;
+      }
+
+      &.icon-unchoose1 {
+        color: #c0c4cc;
+      }
+    }
+  }
+
+}
+</style>