分包医生

2024-01-16 14:59:06 +08:00
parent 562d4e9691
commit d5a9339ddd
1060 changed files with 3177 additions and 44707 deletions
@@ -0,0 +1,259 @@
+import { API } from '../../../../utils/network/api'
+import Toast from 'tdesign-miniprogram/toast/index';
+import { requestSubscribeMessage } from '../../../../utils/requestSubscribeUtil';
+
+let api = new API()
+const app = getApp()
+Page({
+  data: {
+    navbarData: {
+      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
+      title: '在线问诊设置', //导航栏 中间的标题
+    },
+    height: app.globalData.height, 
+    // open_note: "已开启，患者可以向您发起图文问诊",
+    // close_note: "已关闭，暂不接诊",
+    note: "",
+    inquiry_type: 1,
+    inquiry_mode: 1,
+    config_setting:{},
+    info:{
+      is_open: false,
+      inquiry_price: 0,
+      work_num_day: 0
+    },
+    active:0,
+    myprice: "",
+    config:{
+      "max_work_num_day": 30,
+      "min_inquiry_price": 0,
+      "max_inquiry_price": 0,
+      "default_inquiry_price": 0,
+      "times_number": 10,
+      "duration": 1440,
+      "system_inquiry_price": [
+        "0",
+        "5",
+        "10"
+      ]
+    },
+    sub_visible: false,
+    showSetting:false
+  },
+  onLoad(){
+
+  },
+  onShow(){
+    this.getDoctorconfig();
+  },
+  getDoctorconfig(){
+  let {inquiry_type,inquiry_mode}=this.data;
+  //接诊类型（1:专家问诊 2:快速问诊 3:公益问诊 4:问诊购药）
+   //接诊方式（1:图文 2:视频 3:语音 4:电话 5:会员）
+    //获取医生我的账户数据
+    api.getDoctorInquiryConfig({
+        inquiry_type,
+        inquiry_mode
+    }).then(response => {
+      console.log(response);
+      this.setData({
+        info: response.data.info,
+        config: response.data.config,
+        note: response.data.info.is_open
+      })
+    }).catch(errors => {console.error(errors);})
+  },
+  changeON(){
+    let is_open = this.data.info.is_open
+    console.log("changeON:", is_open)
+    let detail = false;
+    if(is_open == 0){
+      detail = true
+    }else{
+      detail = false
+    }
+    this.doChange(detail)
+  },
+  onChange({ detail }) {
+    this.doChange(detail)
+  },
+  getConfig(){
+    let {inquiry_type,inquiry_mode}=this.data;
+    api.getServiceConfig({
+        inquiry_type,
+        inquiry_mode
+    }).then(response => {
+        let result=response.data;
+        if(result){
+            this.setData({
+             'config_setting.service_content':result.service_content,
+             'config_setting.service_process':result.service_process,
+             'config_setting.service_period':result.service_period,
+             'config_setting.service_rounds':result.service_rounds,
+              'config_setting.config_service_id':result.config_service_id
+            })
+        } 
+      }).catch(errors => {console.error(errors);})
+  },
+  doChange(detail){
+    console.log("onChange: ", detail);
+    let is_open = 0;
+    if(detail){
+      let inquiry_price = this.data.info.inquiry_price;
+      console.log(this.data.active);
+      if(this.data.active==0){
+        let check = this.checkPrice(inquiry_price);
+        if(!check) return;
+      }
+    if(this.data.active==1 || this.data.active==2){
+        if(!this.data.info.work_num_day || !this.data.info.inquiry_price){
+            this.setData({
+                showSetting:true
+            })
+            return false;
+        }
+    }
+      this.setData({ note: this.data.open_note });
+      wx.vibrateShort({
+        "type": "heavy"
+      })
+      is_open = 1
+    }else{
+      this.setData({ note: this.data.close_note });
+      is_open = 0
+    }
+    this.setData({ "info.is_open": is_open });
+
+     //修改开关
+     let params = {};
+     params.inquiry_type = this.data.inquiry_type;//接诊类型（1:专家问诊 2:快速问诊 3:公益问诊 4:问诊购药）
+     params.inquiry_mode = this.data.inquiry_mode;//接诊方式（1:图文 2:视频 3:语音 4:电话 5:会员）
+     params.is_open = detail?1:0;
+     api.putDoctorInquiryOpen(params).then(response => {
+      console.log(response);
+    }).then(()=>{
+      if(detail){
+
+        let tmplIds = ['G1RIs0RYqsTQ2CuPQWalIMyb6_deuEEbJfajfhGvNzc']
+        let sub_promise = requestSubscribeMessage(tmplIds)
+        sub_promise.then(res => {
+          console.log("订阅成功")
+          
+        }).catch(err => {
+          console.log(err)
+          let errCode = err.errCode
+          if(errCode == 20004){
+            this.setData({
+              sub_visible: true,
+            })
+          }
+        })
+
+      }
+    }).catch(errors => {console.error(errors);})
+
+  },
+  subcancelDialog(){
+    this.setData({
+      sub_visible: false
+    })
+  },
+  subconfirmDialog(){
+    this.setData({
+      sub_visible: false
+    })
+    wx.openSetting({
+      success (res) {
+        console.log(res.authSetting)
+      }
+    })
+  },
+  settingcancelDialog(){
+    this.setData({
+        showSetting: false
+      })
+  },
+  settingconfirmDialog(){
+      let {active}=this.data;
+    this.setData({
+        showSetting: false
+      })
+      if(active==1){
+        app.go("/user/pages/yishi/onlinesetupprice/index?inquiry_mode=1")
+      }else if(active==2){
+        app.go("/user/pages/yishi/onlinesetupprice/index?inquiry_mode=6")
+      }
+     
+  },
+  onChangeInquiry(event) {
+      let index=event.detail.name;
+      this.setData({
+          active:index
+      })
+       if(index==0){
+           this.setData({
+               inquiry_type:1,
+               inquiry_mode:1, 
+           })
+       }else if(index==1){
+        this.setData({
+            inquiry_type:1,
+            inquiry_mode:2, 
+        })
+       }else{
+        this.setData({
+            inquiry_type:1,
+            inquiry_mode:6, 
+        })
+        this.getConfig();
+       }
+       this.getDoctorconfig();
+  },
+  putDoctorInquiryConfig(){
+    //修改医生问诊配置
+    // let params = {};
+    // params.inquiry_type = this.data.inquiry_type;//接诊类型（1:专家问诊 2:快速问诊 3:公益问诊 4:问诊购药）
+    // params.inquiry_mode = this.data.inquiry_mode;//接诊方式（1:图文 2:视频 3:语音 4:电话 5:会员）
+    // params.inquiry_price = this.data.info.inquiry_price;
+    // params.work_num_day = this.data.info.work_num_day;
+    // api.putDoctorInquiryConfig(params).then(response => {
+    //  console.log(response);
+    //  Toast.success("修改成功");
+    //  wx.switchTab({
+    //   url: "/user/pages/yishi/wenzhen_v2/wenzhen"
+    //  })
+    // }).catch(errors => {console.error(errors);})
+
+    wx.switchTab({
+     url: "/Pages/yishi/wenzhen_v2/wenzhen"
+    })
+
+  },
+  myToast(message){
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: message,
+      theme: 'error',
+      direction: 'column',
+    });
+  },
+  checkPrice(price){
+    let value = Number(price);
+    let min = Number(this.data.config.min_inquiry_price);
+    let max = Number(this.data.config.max_inquiry_price);
+    if(value < min){
+      value = min;
+      let message = '价格不能低于' + min + '元';
+      this.myToast(message);
+      return false;
+    }else if(value >= min && value <=max ){
+      return true;
+    }else{
+      value = max;
+      let message = '价格不能高于' + max + '元';
+      this.myToast(message);
+      return false;
+    }
+  },
+})
@@ -0,0 +1,15 @@
+{
+  "component": true,
+  "usingComponents": {
+    "te-nav-bar": "../../../../commpents/te_navbar/index",
+    "van-cell": "@vant/weapp/cell/index",
+    "van-cell-group": "@vant/weapp/cell-group/index",
+    "van-stepper": "@vant/weapp/stepper/index",
+    "van-switch": "@vant/weapp/switch/index",
+    "van-button": "@vant/weapp/button/index",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "van-tab": "@vant/weapp/tab/index",
+    "van-tabs": "@vant/weapp/tabs/index",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog"
+  }
+}
@@ -0,0 +1,223 @@
+<te-nav-bar navbar-data='{{navbarData}}'></te-nav-bar>
+<view class="container">
+    <van-tabs active="{{ active }}" bind:change="onChangeInquiry" color="#3CC7C0">
+        <van-tab title="图文问诊">
+          
+            <view class="tabcon">
+                <view class="switch_box">
+                <view class="switch_box_top">
+                    <view class="switch_box_item" bindtap="changeON">
+                        <view class="switch_box_item_name">接诊开关</view>
+                        <view class="switch_box_item_btn">
+                            <van-switch active-color="#3CC7C0" inactive-color="#E7E7E7" size="40rpx" checked="{{ info.is_open==1 }}" />
+                        </view>
+                    </view>
+                    <view class="switch_box_note">{{ note==1?'已开启，患者可以向您发起图文问诊':'已关闭，暂不接诊' }}</view>
+                </view>
+                <view class="help">
+                    <van-cell size="large" url="/user/pages/yishi/manual_detail/index?manual_id=6" custom-style="font-size:32rpx;" title="图文问诊操作手册" is-link border="{{false}}" />
+                </view>
+            </view>
+
+            <view class="checked_box">
+                <view class="price_title">价格设置</view>
+                <view class="price_steup_box">
+                    <van-cell size="large" url="/user/pages/yishi/onlinesetupprice/index?inquiry_mode=1" custom-style="font-size:32rpx;" title="每日接诊数量" is-link border="{{true}}">
+                        <view class="cell_value">
+                            {{info.work_num_day}}
+                        </view>
+                    </van-cell>
+                    <van-cell size="large" url="/user/pages/yishi/onlinesetupprice/index?inquiry_mode=1" custom-style="font-size:32rpx;" title="问诊单价" is-link border="{{false}}">
+                        <view class="cell_value">
+                            <text style="color: red;">{{info.inquiry_price}}</text>
+                            <text style="color: #000;"> 元</text>
+                        </view>
+                    </van-cell>
+                </view>
+            </view>
+            <view class="bottom">
+                <text class="bottom_txt">
+                    提示：服务开启后，患者按照所设置的价格向您购买图文问诊服务
+                    1、接诊后，患者可与您在{{config.duration/60}}小时内进行{{config.times_number}}回合沟通
+                    2、若开启公益问诊，图文问诊价格以公益问诊价格为准
+                    3、每日接诊数量和问诊价格每日仅限调整1次，每月仅限调整5次
+                    4、价格修改后立即生效，不影响修改之前已生成的问诊订单
+                </text>
+            </view>
+        </view>
+            
+
+            <view class="go">
+                <van-button disabled="{{info.is_open!=1}}" bind:click="putDoctorInquiryConfig" color="#3CC7C0" custom-style="border-radius: 20rpx;font-size:30rpx;" type="primary" block>去接诊</van-button>
+            </view>
+        </van-tab>
+        <van-tab title="视频问诊">
+           <view class="tabcon">
+            <view class="switch_box">
+                <view class="switch_box_top">
+                    <view class="switch_box_item" bindtap="changeON">
+                        <view class="switch_box_item_name">接诊开关</view>
+                        <view class="switch_box_item_btn">
+                            <van-switch active-color="#3CC7C0" inactive-color="#E7E7E7" size="40rpx" checked="{{ info.is_open==1 }}" />
+                        </view>
+                    </view>
+                    <view class="switch_box_note">{{ note==1?'已开启，患者可以向您发起视频问诊':'已关闭，暂不接诊'}}</view>
+                </view>
+                <view class="help">
+                    <van-cell size="large" url="/user/pages/yishi/manual_detail/index?manual_id=6" custom-style="font-size:32rpx;" title="视频问诊操作手册" is-link border="{{false}}" />
+                </view>
+            </view>
+
+            <view class="checked_box">
+                <view class="price_title">价格设置</view>
+                <view class="price_steup_box">
+                    <van-cell size="large" url="/user/pages/yishi/onlinesetupprice/index?inquiry_mode=2" custom-style="font-size:32rpx;" title="每日接诊数量" is-link border="{{true}}">
+                        <view class="cell_value">
+                            {{info.work_num_day}}
+                        </view>
+                    </van-cell>
+                    <van-cell size="large" url="/user/pages/yishi/onlinesetupprice/index?inquiry_mode=2" custom-style="font-size:32rpx;" title="问诊单价" is-link border="{{false}}">
+                        <view class="cell_value">
+                            <text style="color: red;">{{info.inquiry_price}}</text>
+                            <text style="color: #000;"> 元</text>
+                        </view>
+                    </van-cell>
+                </view>
+            </view>
+            <view class="bottom" >
+                <text class="bottom_txt">
+                    提示：服务开通后，患者可以向您购买视频问诊服务，接诊后<text class="green">需要您主动和患者预约视频时间并同步设置预约时间</text>
+                    1、视频问诊价格<text class="green">每日仅限调整1次，每自然月仅限调整5次</text>
+                    2、单价修改后立即生效，不影响当日已生成的问诊订单
+                    3、<text class="green">24小时不接诊，订单自动取消</text>，并不展示在您的接诊列表中
+                    4、接诊后，您与患者<text class="green">沟通有效期为48小时</text>，同时提供无回合限制图文、语音形式交流
+                    5、患者因服务不满意等原因要求退款时，平台会和您协商处理
+                    <!-- 1、接诊后，患者可与您在{{config.duration/60}}小时内进行{{config.times_number}}回合沟通
+                    2、若开启公益问诊，图文问诊价格以公益问诊价格为准
+                    3、每日接诊数量和问诊价格每日仅限调整1次，每月仅限调整5次
+                    4、价格修改后立即生效，不影响修改之前已生成的问诊订单 -->
+                </text>
+            </view>
+           </view>
+
+           
+        
+            <view class="go">
+                <van-button disabled="{{info.is_open!=1}}" bind:click="putDoctorInquiryConfig" color="#3CC7C0" custom-style="border-radius: 20rpx;font-size:30rpx;" type="primary" block>去接诊</van-button>
+            </view>
+        </van-tab>
+        <van-tab title="疑难会诊">
+            <view class="tabcon">
+                <view class="switch_box">
+                <view class="switch_box_top">
+                    <view class="switch_box_item" bindtap="changeON">
+                        <view class="switch_box_item_name">接诊开关</view>
+                        <view class="switch_box_item_btn">
+                            <van-switch active-color="#3CC7C0" inactive-color="#E7E7E7" size="40rpx" checked="{{ info.is_open==1 }}" />
+                        </view>
+                    </view>
+                    <view class="switch_box_note">{{ note==1?'已开启，患者可以向您发起疑难会诊':'已关闭，暂不接诊'}}</view>
+                </view>
+                <view class="help">
+                    <van-cell size="large" url="/user/pages/yishi/manual_detail/index?manual_id=6" custom-style="font-size:32rpx;" title="疑难会诊操作手册" is-link border="{{false}}" />
+                </view>
+            </view>
+
+            <view class="checked_box">
+                <view class="price_title">价格设置</view>
+                <view class="price_steup_box">
+                    <van-cell size="large" url="/user/pages/yishi/onlinesetupprice/index?inquiry_mode=6" custom-style="font-size:32rpx;" title="每日接诊数量" is-link border="{{true}}">
+                        <view class="cell_value">
+                            {{info.work_num_day}}
+                        </view>
+                    </van-cell>
+                    <van-cell size="large" url="/user/pages/yishi/onlinesetupprice/index?inquiry_mode=6" custom-style="font-size:32rpx;" title="问诊单价" is-link border="{{false}}">
+                        <view class="cell_value">
+                            <text style="color: red;">{{info.inquiry_price}}</text>
+                            <text style="color: #000;"> 元</text>
+                        </view>
+                    </van-cell>
+                </view>
+            </view>
+            <view class="checked_box" style="margin-top: 10rpx;">
+                <view class="price_title">服务设置</view>
+                <view class="price_steup_box">
+                    <van-cell size="large" url="{{config_setting.config_service_id?'/user/pages/yishi/service_setting/index?config_service_id='+config_setting.config_service_id:'/user/pages/yishi/service_setting/index'}}" custom-style="font-size:32rpx;" title="服务内容" is-link border="{{true}}">
+                        <view class="cell_value" wx:if="{{config_setting.service_content}}">
+                            <!-- {{config_setting.service_content}} -->
+                            去查看
+                        </view>
+                        <view class="cell_value_seting" wx:else>
+                            去设置
+                        </view>
+                    </van-cell>
+                    <van-cell size="large" url="{{config_setting.config_service_id?'/user/pages/yishi/service_setting/index?config_service_id='+config_setting.config_service_id:'/user/pages/yishi/service_setting/index'}}" custom-style="font-size:32rpx;" title="服务流程" is-link border="{{true}}">
+                     
+                        <view class="cell_value" wx:if="{{config_setting.service_process}}">
+                            <!-- {{config_setting.service_process}} -->
+                            去查看
+                        </view>
+                        <view class="cell_value_seting" wx:else>
+                            去设置
+                        </view>
+                    </van-cell>
+                    <van-cell size="large" url="{{config_setting.config_service_id?'/user/pages/yishi/service_setting/index?config_service_id='+config_setting.config_service_id:'/user/pages/yishi/service_setting/index'}}" custom-style="font-size:32rpx;" title="服务周期" is-link border="{{true}}">
+                        <view class="cell_value" wx:if="{{config_setting.service_period}}">
+                            {{config_setting.service_period}}
+                        </view>
+                        <view class="cell_value_seting" wx:else>
+                            去设置
+                        </view>
+                    </van-cell>
+                    <van-cell size="large" url="{{config_setting.config_service_id?'/user/pages/yishi/service_setting/index?config_service_id='+config_setting.config_service_id:'/user/pages/yishi/service_setting/index'}}" custom-style="font-size:32rpx;" title="服务回合数" is-link border="{{true}}">
+                        <view class="cell_value" wx:if="{{config_setting.service_rounds}}">
+                            {{config_setting.service_rounds}}
+                        </view>
+                        <view class="cell_value_seting" wx:else>
+                            去设置
+                        </view>
+                    </van-cell>
+                </view>
+            </view>
+            <view class="bottom">
+                <text class="bottom_txt">
+                    提示：服务开通后，患者可以向您购买疑难会诊服务，接诊后需要与患者进行图文沟通。
+                    1、问诊价格<text class="green">每日仅限调整1次，每自然月仅限调整5次</text>
+                    2、单价修改后立即生效，不影响当日已生成的问诊订单
+                    3、接诊后，患者根据您设定的服务周期和服务次数进行问诊沟通
+                    4、接诊后出现争议时，平台客服会根据实际问诊情况与您协商进行退款
+                </text>
+            </view>
+            </view>
+           
+
+            <view class="go">
+                <van-button disabled="{{info.is_open!=1}}" bind:click="putDoctorInquiryConfig" color="#3CC7C0" custom-style="border-radius: 20rpx;font-size:30rpx;" type="primary" block>去接诊</van-button>
+            </view>
+        </van-tab>
+    </van-tabs>
+
+
+    <t-toast id="t-toast" />
+
+    <t-dialog visible="{{ sub_visible }}" title="温馨提示" content="您已关闭订阅消息通知，请点击“确认”按钮在设置中打开订阅通知。">
+        <view slot="cancel-btn" class="dialog dialog_cancel_btn" bindtap="subcancelDialog">
+            取消
+        </view>
+        <view slot="confirm-btn" class="dialog dialog_confirm_btn" bindtap="subconfirmDialog">
+            确定
+        </view>
+    </t-dialog>
+    <t-dialog
+    visible="{{ showSetting }}"
+    title="提示"
+    content="请先设置每日接诊数量和问诊单价"
+  >
+  <view slot="cancel-btn" class="dialog dialog_cancel_btn" bindtap="settingcancelDialog">
+    取消
+  </view>
+  <view slot="confirm-btn" class="dialog dialog_confirm_btn" bindtap="settingconfirmDialog">
+    去设置
+  </view>
+</t-dialog>
+</view>
@@ -0,0 +1,176 @@
+page{
+  background-color: #F6F6F6;
+}
+.container{
+  width: 100vw;
+ 
+}
+.switch_box{
+  display: flex;
+  flex-direction: column;
+  width: 90vw;
+  /* height: 500rpx; */
+  border-radius: 20rpx;
+  margin: 0 auto;
+  background-color: rgb(255, 255, 255);
+  margin-top: 20rpx;
+}
+.switch_box_top{
+  position: relative;
+  display: flex;
+  /* height: 300rpx; */
+  flex-direction: column;
+  padding: 30rpx 30rpx 20rpx 30rpx;
+}
+.switch_box_top::after{
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 32rpx;
+  bottom: 0;
+  border-bottom: 1px solid var(--td-cell-border-color, var(--td-gray-color-3, #e7e7e7));
+  transform: scaleY(0.5);
+}
+.switch_box_item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.switch_box_item_name{
+  flex: 1;
+  font-size: 16px;
+}
+.switch_box_item_btn{
+  flex: 1;
+  text-align: right;
+}
+.switch_box_note{
+  color: #999999;
+  font-size: 24rpx;
+}
+.help{
+  margin-bottom: 20rpx;
+}
+.price_title{
+  width: 90vw;
+  margin: 20rpx auto 0 auto;
+  font-size: 32rpx;
+  margin-bottom: 20rpx;
+  /* font-family: "AlibabaPuHuiTi-2-55-Regular"; */
+  color: #333333;
+}
+.price_steup_box{
+  padding-top: 10rpx;
+  display: flex;
+  width: 90vw;
+  margin: 0 auto;
+  border-radius: 20rpx;
+  flex-direction: column;
+  background-color: rgb(255, 255, 255);
+}
+.price_steup_box_top{
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin: 20rpx 20rpx 20rpx 30rpx;
+  align-items: center;
+  padding-bottom: 20rpx;
+}
+.price_steup_box_bottom{
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin: 0rpx 20rpx 0rpx 30rpx;
+  align-items: center;
+}
+.price_steup_box_top_title, .price_steup_box_bottom_title{
+  flex: 1;
+  font-size: 32rpx;
+  color: #333;
+}
+.price_steup_box_bottom_num{
+  flex: 1.5;
+  display: flex;
+  align-items: center;
+}
+.price_steup_box_top::after{
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  border-bottom: 1px solid var(--td-cell-border-color, var(--td-gray-color-3, #e7e7e7));
+  transform: scaleY(0.5);
+}
+.price_steup_box_top_stepper{
+  flex: 1;
+  text-align: right;
+  align-items: center;
+}
+.bottom{
+  width: 90vw;
+  margin: 0rpx auto 20rpx;
+  color: #999;
+  letter-spacing: 2rpx;
+  font-size: 28rpx;
+  line-height: 40rpx;
+}
+.go{
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 80rpx;
+  width: 90vw;
+}
+.weui-input{
+  color: red;
+  display: inline-block;
+  text-align: right;
+}
+.price{
+  text-align: center;
+  flex: 1;
+}
+.cell_value{
+  color: #000;
+}
+.cell_value_seting{
+    color: rgba(0,0,0,0.45);
+  }
+.dialog{
+  width: 50%;
+  text-align: center;
+  height: 100rpx;
+  line-height: 100rpx;
+}
+.dialog_cancel_btn{
+  border-top: 1px solid #E9E9E9;
+  border-right: 1px solid #E9E9E9;
+}
+.dialog_confirm_btn{
+  border-top: 1px solid #E9E9E9;
+  color: #3CC7C0;
+}
+
+.van-tab{
+    color: rgba(0,0,0,0.45)!important;
+}
+.van-tab--active{
+    font-weight: bold!important;
+    color: rgba(0,0,0,0.85)!important;
+}
+.tabcon{
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    height: calc(100vh - 400rpx);
+    display: flex;
+    flex-direction: column;
+    
+}
+.green{
+    color:#3CC7C0;
+}