Merge branch '添加生图积分和服务商切换' into 20260415生产发布版本

# Conflicts:
#	src/api/indexAI.js

src/api/indexAI.js

@@ -334,6 +334,15 @@ export function GetProductInfo(query) {
     })
 }
 
+// 获取生成图片剩余积分
+export function GetPoints(query) {
+    return request({
+        url: '/aidesign/outside/GetPoints',
+        method: 'post',
+        data:query
+    })
+}
+
 // 外墙提交反馈信息
 export function outsideUpdateFeedBack(query) {
     return request({

src/main.ts

@@ -48,7 +48,7 @@ Vue.component('el-collapse', ElCollapse);
 Vue.component('el-collapse-item', ElCollapseItem);
 Vue.component('el-image', ElImage);
 // 引入并初始化 vConsole（仅在非生产环境启用，避免线上暴露调试工具）
-if (process.env.NODE_ENV !== 'production') {
+if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'development') {
   const VConsole = require('vconsole')
   new VConsole() // 初始化后，移动端页面会出现 vConsole 悬浮按钮
 }

src/views/AIDesign/GeneratePlan.vue

@@ -250,6 +250,7 @@ export default class GeneratePlan extends Vue {
         let that = this;
         if (Number(this.mainArea) > 0) {
             const formData = new FormData();
+            const checkedFwsInfo: any = JSON.parse(window.localStorage.getItem("pageDesignfwsRadioValue")!);
             formData.append('eventname', '确认方案去下单');//事件名称
             formData.append('eventtype', 'click');//事件类型
             formData.append('menupath', '外墙质感/结果页/确认AI设计/确认方案去下单');//完整菜单路径
@@ -261,6 +262,9 @@ export default class GeneratePlan extends Vue {
                 F_ID: that.planParams.F_ID
             };
             formData.append('eventdata', JSON.stringify(eventdataObj));//事件数据
+            if (checkedFwsInfo){
+                formData.append('servicecode', checkedFwsInfo.shop_code);
+            }
             AddTrackEvent(formData)//埋点
             // 获取确认下单地址
             GetOrderAddress().then((res) => {

src/views/AIDesign/design.vue

@@ -18,11 +18,17 @@
       </div>
       <!-- 关联项目 -->
       <div class="image-selection padded-lr-20" v-show="projectBoxShow">
-        <div class="project-placeholder">
+        <div class="project-box">
+          <div class="project-overlay" v-show="overlayShow"></div>
           <div class="project-add-box">
-            <span style="font-weight: 700;"><span style="color: red;margin-right: 5px;">*</span>关联项目</span>
+            <div class="fws-change-box" @click="overlayShow = !overlayShow">
+              <span class="fws-code">{{fwsCode}}</span>
+              <span class="change-txt">切换</span>
+              <van-icon v-show="!overlayShow" name="arrow-down" color="#0057BA" />
+              <van-icon v-show="overlayShow" name="arrow-up" color="#0057BA" />
+            </div>
             <van-popover placement="bottom-end" :offset="[17, 4]" v-model="showProjectPopover" theme="dark"
-              trigger="click">
+                         trigger="click">
               <div role="menu" class="van-popover__content">
                 <div role="menuitem" class="van-popover__action van-popover__action--with-icon" @click="toProjectLink">
                   <img width="30px" :src="require('@/assets/AIDesign/projectIcon.png')" alt="">
@@ -34,29 +40,50 @@
               </template>
             </van-popover>
           </div>
-          <div class="list-item-checked" v-if="checkedProject != null">
-            <div class="title-item" v-show="checkedProject.fulladdress">
-              <span class="title" style="text-align: left;">{{ checkedProject.fulladdress }}</span>
-              <span class="status">已报备</span>
-            </div>
-            <div class="user-item" v-show="checkedProject.contact">
-              <van-icon name="user-o" />
-              <span class="txt">{{ checkedProject.contact }}</span>
+          <div class="check-list-box" v-show="overlayShow">
+            <van-radio-group v-model="fwsRadioValue">
+              <van-cell-group>
+                <van-cell clickable v-for="(item,index) in fwsList" :key="index" @click="radioClick(item.shop_code,item.shop_name)">
+                  <template #icon>
+                    <van-radio :name="item.shop_code" />
+                  </template>
+                  <template #title>
+                    <div :class="fwsRadioValue == item.shop_code ? 'list-label-checked' : 'list-label'">
+                      <span class="code">{{item.shop_code}}</span>
+                      <span class="value">{{item.shop_name}}</span>
+                    </div>
+                  </template>
+                </van-cell>
+              </van-cell-group>
+            </van-radio-group>
+          </div>
+          <div class="project-placeholder">
+            <div style="font-weight: 700;width: 100%;text-align: left;margin-bottom: 10px;"><span style="color: red;margin-right: 5px;">*</span>关联项目</div>
+            <div class="point-box">已有积分：<span>{{projectPoint}}</span></div>
+            <div class="list-item-checked" v-if="checkedProject != null">
+              <div class="title-item" v-show="checkedProject.fulladdress">
+                <span class="title" style="text-align: left;">{{ checkedProject.fulladdress }}</span>
+                <span class="status">已报备</span>
+              </div>
+              <div class="user-item" v-show="checkedProject.contact">
+                <van-icon name="user-o" />
+                <span class="txt">{{ checkedProject.contact }}</span>
+              </div>
+              <div class="user-item" v-show="checkedProject.tel">
+                <van-icon name="phone-o" />
+                <span class="txt">{{ checkedProject.tel }}</span>
+              </div>
+              <div class="user-item">
+                <van-icon name="info-o" color="#D43030" />
+                <span class="txt" style="color: #D43030;">已生成套数：{{ checkedProject.DesignCount }}</span>
+              </div>
             </div>
-            <div class="user-item" v-show="checkedProject.tel">
-              <van-icon name="phone-o" />
-              <span class="txt">{{ checkedProject.tel }}</span>
+            <div class="placeholder" style="width: 100%">
+              <p v-if="checkedProject == null" class="placeholder-text">当前暂无已关联的项目，请选择已报备项目</p>
+              <van-button type="primary" color="#2484F2" block @click="chooseProject" :loading="showChooseProject"
+                          :disabled="showChooseProject" loading-type="spinner" loading-text="选择项目"
+                          style="width: 80%;margin-left: 10%;">选择项目</van-button>
             </div>
-            <!-- <div class="user-item">
-              <van-icon name="info-o" color="#D43030" />
-              <span class="txt" style="color: #D43030;">剩余免费生成次数：{{ checkedProject.AvailableQuantity }}</span>
-            </div> -->
-          </div>
-          <div class="placeholder" style="width: 100%">
-            <p v-if="checkedProject == null" class="placeholder-text">当前暂无已关联的项目，请选择已报备项目</p>
-            <van-button type="primary" color="#2484F2" block @click="chooseProject" :loading="showChooseProject"
-              :disabled="showChooseProject" loading-type="spinner" loading-text="选择项目"
-              style="width: 80%;margin-left: 10%;">选择项目</van-button>
           </div>
         </div>
       </div>
@@ -103,16 +130,29 @@
               </template>
             </van-popover>
           </div>
-          <div class="option-grid stone-colors-grid" ref="designsRef">
+
+          <div class="option-grid stone-colors-grid" ref="designsRef" @mousedown="handleMouseDown"
+               @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
             <div v-for="(style, index) in designStyles" :key="index" class="option-item"
-              :class="{ active: DesignStyle === style.value }" @click="selectStyle(style.value, 'designsRef', index)">
+                 :class="{ active: DesignStyle === style.value }" @click="selectStyle(style.value, 'designsRef', index)">
               <img :src="imgBaseUrl + style.imgPath" alt="" class="style-image" />
-              <div class="style-name">{{ style.text }}</div>
-            </div>
-            <div class="rightArrows">
-              <img width="12" :src="require('@/assets/AIDesign/rightjt.png')" />
+              <div class="split-name">{{ style.text }}</div>
             </div>
           </div>
+          <div class="rightArrows">
+            <img width="12" :src="require('@/assets/AIDesign/rightjt.png')" />
+          </div>
+
+          <!--<div class="option-grid stone-colors-grid" ref="designsRef">-->
+            <!--<div v-for="(style, index) in designStyles" :key="index" class="option-item"-->
+              <!--:class="{ active: DesignStyle === style.value }" @click="selectStyle(style.value, 'designsRef', index)">-->
+              <!--<img :src="imgBaseUrl + style.imgPath" alt="" class="style-image" />-->
+              <!--<div class="style-name">{{ style.text }}</div>-->
+            <!--</div>-->
+            <!--<div class="rightArrows">-->
+              <!--<img width="12" :src="require('@/assets/AIDesign/rightjt.png')" />-->
+            <!--</div>-->
+          <!--</div>-->
         </div>
 
         <!-- 仿石漆电子色卡 -->
@@ -316,7 +356,7 @@
       <div class="generate-section padded-lr-20">
         <van-button v-show="AIBtnDisabled" type="primary" block color="#E87838" disabled loading loading-type="spinner"
           loading-text="AI生成"></van-button>
-        <van-button v-show="!AIBtnDisabled" type="primary" block @click="generateDesign"
+        <van-button v-show="!AIBtnDisabled" type="primary" block @click="beforeGenerateDesign"
           color="#E87838">AI生成</van-button>
         <div class="btn-note">*效果图仅供参考, 不作为交付标准</div>
       </div>
@@ -355,7 +395,7 @@
             <van-button type="primary" size="mini" color="#2484F2" class="btn" @click="onSearch">搜索</van-button>
           </div>
         </div>
-        <div style="width: 90%;height: 50px;"></div>
+        <div style="width: 90%;height: 55px;"></div>
         <div class="list-item" :style="checkedProjectId == index ? 'border: 1px solid #2484F2;' : ''"
           v-for="(item, index) in projectList" :key="index" @click="checkedProjectId = index">
           <div class="title-item">
@@ -370,10 +410,10 @@
             <van-icon name="phone-o" />
             <span class="txt">{{ item.tel }}</span>
           </div>
-          <!-- <div class="user-item">
+          <div class="user-item">
             <van-icon name="info-o" color="#D43030" />
-            <span class="txt" style="color: #D43030;">剩余免费生成次数：{{ item.AvailableQuantity }}</span>
-          </div> -->
+            <span class="txt" style="color: #D43030;">已生成套数：{{ item.DesignCount }}</span>
+          </div>
           <div class="img-item" v-show="checkedProjectId == index">
             <img src="../../assets/AIDesign/project_checked.png" class="img-checked">
           </div>
@@ -394,12 +434,33 @@
         <div class="dialog-btn" @click="dialogShow = false">知道了</div>
       </div>
     </van-dialog>
+    <van-dialog v-model="pointDialogShow1" :show-confirm-button="false" style="overflow: visible;">
+      <div class="dialog-point-box">
+        <div class="title">AI生图<span class="txt-color1">  积分轻松抵</span></div>
+        <div class="content">已有积分：<span class="txt-color2">{{projectPoint}}</span></div>
+        <div class="content">每次成功生图将使用<span class="txt-color2">500</span>积分</div>
+        <div class="dialog-btn-point1" @click="pointDialogSure">确认生成</div>
+        <div class="dialog-btn-point2" @click="pointDialogShow1 = false">稍后再说</div>
+        <img src="../../assets/AIDesign/point-dialog-icon-success.png" class="point-icon">
+      </div>
+    </van-dialog>
+    <van-dialog v-model="pointDialogShow2" :show-confirm-button="false" style="overflow: visible;">
+      <div class="dialog-point-box">
+        <div class="title txt-color1">本次生图失败</div>
+        <div class="content">失败原因：您的积分不足</div>
+        <div class="content">使用积分：<span class="txt-color2">0</span></div>
+        <div class="content">剩余积分：<span class="txt-color2">{{projectPoint}}</span></div>
+        <div class="content">小提示：可完成项目交付获取更多积分~</div>
+        <div class="dialog-btn-point2" style="margin-top: 20px;" @click="pointDialogShow2 = false">我知道了</div>
+        <img src="../../assets/AIDesign/point-dialog-icon-fail.png" class="point-icon">
+      </div>
+    </van-dialog>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { CreateDesign, GetEntity, GetReadState, UpdateReadState, GetProjectlist, GetDictList } from "@/api/indexAI";
+import { CreateDesign, GetEntity, GetReadState, UpdateReadState, GetProjectlist, GetDictList, GetPoints } from "@/api/indexAI";
 import { ImagePreview, Popover } from 'vant';
 import { Dialog } from 'vant';
 import { getWecomType, toLBHome, toXiaoChengxu } from '@/utils/index';
@@ -503,7 +564,16 @@ export default class extends Vue {
   private popover_actions = [{ text: "风格主要对应罗马柱类型，请按需选择", className: "actionsTit" }];
   private showChooseProject = false;
   private showProjectPopover = false;
-  created() {
+    private projectPoint = '';
+    private pointDialogShow1 = false;
+    private pointDialogShow2 = false;
+    private fwsCode = '';
+    private fwsName = '';
+    private fwsList = [];
+    private fwsRadioValue = '';
+    private overlayShow = false;
+
+    created() {
     // 图片头
     if (window.location.href.indexOf('aidesign.') > -1) {
       this.imgBaseUrl = 'https://aidesign.nipponpaint.com.cn'
@@ -549,6 +619,7 @@ export default class extends Vue {
     this.startIndex = 0;
     this.currentIndex = 0;
     this.currentTitle = null;
+    this.overlayShow = false;
     this.activeName = "外墙质感";// tab选中的项
     this.color_selItem = null;//选中的外墙平涂
     this.color_options = [];//外墙平涂列表
@@ -574,7 +645,9 @@ export default class extends Vue {
   private getServiceCode() {
     let that = this;
     const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
-    let serviceCodeArray = [];
+      const checkedFwsInfo: any = JSON.parse(window.localStorage.getItem("pageDesignfwsRadioValue")!);
+      let serviceCodeArray = [];
+      let serviceObjArray = [];
     // if (userInfo && userInfo.loginTypeList && userInfo.loginTypeList.length > 0) {
     //   userInfo.loginTypeList.forEach(item => {
     //     if (item.shopType == 'stoneLikePaint') {
@@ -586,8 +659,25 @@ export default class extends Vue {
     // }
     if (userInfo && userInfo.ServiceCode) {
       serviceCodeArray = userInfo.ServiceCode.split(',').map(item => item.trim()).filter(item => item !== '');
+        userInfo.ServiceCode.split(',').forEach((item,index)=>{
+            let obj = {};
+            obj.shop_code = item;
+            obj.shop_name = userInfo.ServiceName.split(',')[index];
+            serviceObjArray.push(obj);
+        })
     }
+    that.fwsList = serviceObjArray;
     that.serviceCodeArray = serviceCodeArray;
+    const serviceCodeIndex = serviceObjArray.findIndex(item => item.shop_code == checkedFwsInfo.shop_code);
+    if (checkedFwsInfo && serviceCodeIndex != -1){
+        that.fwsCode = checkedFwsInfo.shop_code;
+        that.fwsName = checkedFwsInfo.shop_name;
+        that.fwsRadioValue = checkedFwsInfo.shop_code;
+    } else {
+        that.fwsCode = serviceObjArray[0].shop_code;
+        that.fwsName = serviceObjArray[0].shop_name;
+        that.fwsRadioValue = serviceObjArray[0].shop_code;
+    }
   }
   // 处理文件选择（对应 beforeRead + afterRead）
   handleFileChange(e) {
@@ -665,6 +755,24 @@ export default class extends Vue {
     ImagePreview([url]);
   }
 
+    radioClick(code,value,isClearCheckedProject = true){
+        let that = this;
+        that.fwsName = value;
+        that.fwsCode = code;
+        that.fwsRadioValue = code;
+        let overviewRadioValue = {
+            shop_code:code,
+            shop_name:value
+        }
+        that.GetPointsFn();
+        if (isClearCheckedProject){
+            that.checkedProject = null;
+            that.checkedProjectId = null;
+        }
+        window.localStorage.setItem("pageDesignfwsRadioValue", JSON.stringify(overviewRadioValue));
+        that.overlayShow = false;
+    }
+
   // 处理罗马柱
   openComponentPreview(initIndex: number, list) {
     if (list.length > 0) {
@@ -684,6 +792,18 @@ export default class extends Vue {
     this.currentTitle = this.titlesArray[index] || "无标题";
     this.currentIndex = index;
   }
+
+    GetPointsFn(){
+      let that = this;
+        const formData = new FormData();
+        formData.append('serviceCode', that.fwsCode);
+        GetPoints(formData).then(response => {
+            if (response.StatusCode == 200) {
+                that.projectPoint = response.Data.point;
+            }
+        });
+    }
+
   GetReadStateFn() {
     const formData = new FormData();
     const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
@@ -1023,24 +1143,55 @@ export default class extends Vue {
     this.currentScrollElement = null;
   }
 
+  //积分提醒弹框确认事件
+    private pointDialogSure(){
+        let that = this;
+        if (that.projectPoint >= 500){
+            that.generateDesign();
+            that.pointDialogShow1 = false;
+        } else {
+            that.pointDialogShow1 = false;
+            that.pointDialogShow2 = true;
+        }
+    }
+
+  private beforeGenerateDesign(){
+        let that = this;
+      if (!this.Userfile1 && !this.oldf_id) {
+          this.$toast.fail('请选择图片');
+          return;
+      }else if (that.projectBoxShow == true && this.activeName === '外墙质感') {
+          if (that.checkedProject == null) {
+              that.$toast.fail('请选择关联项目');
+              return;
+          }else if (that.checkedProject != null && that.checkedProject.AvailableQuantity <= 0){
+              const formData = new FormData();
+              formData.append('serviceCode', that.fwsCode);
+              GetPoints(formData).then(response => {
+                  if (response.StatusCode == 200) {
+                      that.projectPoint = response.Data.point;
+                      that.pointDialogShow1 = true;
+                      return;
+                  }else {
+                      return;
+                  }
+              });
+          }else {
+              that.generateDesign();
+          }
+          // if (that.checkedProject.AvailableQuantity == 0) {
+          //   this.projectActionNumShow = true;
+          //   return;
+          // }
+      }else {
+          that.generateDesign();
+      }
+  }
+
   private generateDesign() {
     let that = this;
     // console.log(this.Userfile1);
     // 实现AI生成功能
-    if (that.projectBoxShow == true && this.activeName === '外墙质感') {
-      if (that.checkedProject == null) {
-        that.$toast.fail('请选择关联项目');
-        return;
-      }
-      // if (that.checkedProject.AvailableQuantity == 0) {
-      //   this.projectActionNumShow = true;
-      //   return;
-      // }
-    }
-    if (!this.Userfile1 && !this.oldf_id) {
-      this.$toast.fail('请选择图片');
-      return;
-    }
     // const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
     const formData = new FormData();
     if (this.activeName === '外墙质感') {
@@ -1205,11 +1356,13 @@ export default class extends Vue {
     let that = this;
     const formData = new FormData();
     // const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
-    formData.append('ServiceCode', that.serviceCodeArray.join(','));
+    // formData.append('ServiceCode', that.serviceCodeArray.join(','));
+      formData.append('servicecode', that.fwsCode);
     formData.append('projectid', projectId);
     GetProjectlist(formData).then(response => {
       if (response.StatusCode == 200) {
         that.checkedProject = response.Data[0];
+        that.radioClick(response.Data[0].servicecode,'',false);
       } else {
         // console.log(response.Info)
       }
@@ -1221,7 +1374,8 @@ export default class extends Vue {
     let that = this;
     const formData = new FormData();
     const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
-    formData.append('ServiceCode', that.serviceCodeArray.join(','));
+    // formData.append('ServiceCode', that.serviceCodeArray.join(','));
+      formData.append('servicecode', that.fwsCode);
     if (that.projectSearchValue.trim().length != 0) {
       formData.append('keyWord', that.projectSearchValue);
     }
@@ -1313,6 +1467,9 @@ export default class extends Vue {
             that.projectBoxShow = false;
           } else {
             that.projectBoxShow = that.isNeedProject;
+            if (that.projectBoxShow == true){
+                that.GetPointsFn();
+            }
           }
           that.save_projectBoxShow_org = that.projectBoxShow;
           this.zgInitData();
@@ -1406,6 +1563,18 @@ export default class extends Vue {
   flex-direction: column;
 }
 
+.point-box{
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 14px;
+  color: #999;
+  text-align: left;
+  margin-left: 20px;
+  span{
+    color: #000;
+  }
+}
+
 .container {
   // padding: 0 20px;
 }
@@ -1492,6 +1661,85 @@ export default class extends Vue {
   text-align: center;
 }
 
+.project-box{
+  position: relative;
+  .project-overlay{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 12px;
+  }
+  .project-add-box {
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 12px 12px 0 0;
+    align-items: center;
+    padding: 10px;
+    z-index: 200;
+    position: relative;
+    background-color: #ffffff;
+    .fws-change-box{
+      flex-direction: row;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .fws-code{
+        font-size: 12px;
+        color: #0057ba;
+        border: 1px solid #0057ba;
+        border-radius: 10px;
+        padding: 2px 4px;
+      }
+      .change-txt{
+        font-size: 12px;
+        color: #0057BA;
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .check-list-box{
+    width: 100%;
+    flex-direction: column;
+    display: flex;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    padding: 10px 10px 5px 10px;
+    /*background-color: red;*/
+    z-index: 200;
+    position: absolute;
+    top: 42px;
+    background: linear-gradient(135deg, #ecf1f4 0%, #e7ecfb 100%);
+    .list-label{
+      text-align: left;
+      margin-left: 15px;
+      .code{
+        color: #666666;
+      }
+      .value{
+        color: #666666;
+        margin-left: 5px;
+      }
+    }
+    .list-label-checked{
+      text-align: left;
+      margin-left: 15px;
+      .code{
+        color: #0057BA;
+        font-weight: 700;
+      }
+      .value{
+        color: #0057BA;
+        font-weight: 700;
+        margin-left: 5px;
+      }
+    }
+  }
+}
+
 .image-placeholder {
   position: relative;
   display: flex;
@@ -1522,13 +1770,13 @@ export default class extends Vue {
   padding-bottom: 30px;
 }
 
-.project-add-box {
-  width: 100%;
-  flex-direction: row;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
+.van-cell-group{
+  background-color: transparent;
+}
+
+.van-cell{
+  margin-bottom: 5px;
+  border-radius: 8px;
 }
 
 ::v-deep .van-button--normal {
@@ -2093,6 +2341,53 @@ export default class extends Vue {
   }
 }
 
+.dialog-point-box{
+  flex-direction: column;
+  display: flex;
+  box-sizing: border-box;
+  position: relative;
+  padding: 20px 15px;
+  position: relative;
+  .title{
+    font-size: 22px;
+  }
+  .content{
+    font-size: 14px;
+    margin-top: 10px;
+    color: #999;
+  }
+  .txt-color1{
+    color: #E55B2A;
+  }
+  .txt-color2{
+    color: #000;
+  }
+  .dialog-btn-point1{
+    background-color: #E55B2A;
+    border-radius: 10px;
+    font-size: 18px;
+    color:#fff;
+    margin-top: 20px;
+    padding: 6px 0;
+    box-sizing: border-box;
+    text-align: center;
+  }
+  .dialog-btn-point2{
+    border-radius: 10px;
+    font-size: 16px;
+    margin-top: 10px;
+    padding: 6px 0;
+    box-sizing: border-box;
+    text-align: center;
+  }
+  .point-icon{
+    width: 120px;
+    position: absolute;
+    top: -55px;
+    right: -10px;
+  }
+}
+
 .dialog-box {
   flex-direction: column;
   display: flex;