頁面製作串接api

src/api/index.js

@@ -21,6 +21,12 @@ export const setUserTpl = async (tpl) =>
 export const toggleSendWithAD = async (type) =>
   ajax(`/user/toggleSendWithAD`, { type }, "POST");
 
+export const searchConnection = async (type) =>
+  ajax(`/user/searchConnection`, { type }, "POST");
+
+export const setUserNfcTpl = async (tpl) =>
+  ajax(`/user/setUserNfcTpl`, { tpl }, "POST");
+
 export const register = async (userInfo) =>
   ajax(`/auth/register`, userInfo, "POST");
 
@@ -65,4 +71,7 @@ export const getMovie = async () =>
 export const getMarquee = async () =>
   ajax(`/ads/getMarquee`);
 
+//通訊錄
+export const addUserFavi = async (params) =>
+  ajax(`/UserFavi/addUserFavi`, params , "POST");
 

src/assets/css/main.css

@@ -634,10 +634,8 @@ h1, h2, h3, h4, h5, h6 {
   margin-top: 5px;
   margin-right: 5px;
 }
-.van-cell-group .van-cell .van-field__label--top i, .van-cell-group .van-cell .van-field__label--top svg {
+.van-cell-group .van-cell .van-cell {
-  color: #5b7b94;
+  padding: 6px 0px;
-  margin-top: 0px;
-  margin-right: 5px;
 }
 
 /* =========================================  stage  ============================================= */

src/assets/sass/layout/_layout.scss

@@ -57,7 +57,7 @@
 .van-cell-group{
     border-radius: 5px;
     margin-bottom: 15px;
-    overflow: hidden;
+    overflow: hidden;    
     .van-cell{
         padding: 6px 16px;
         align-items: center;
@@ -85,12 +85,8 @@
                 margin-right: 5px;
             }
         }
-        .van-field__label--top{
+        .van-cell{
-            i,svg{
+            padding: 6px 0px;
-                color: #5b7b94;
-                margin-top: 0px;
-                margin-right: 5px;
-            }
         }
     }
 }

src/views/Home/index.vue

@@ -404,6 +404,11 @@ const handleLogout = () => {
             </template>
           </van-field>
       </van-cell-group>
+
+      <div class="px-3">
+        <van-button size="normal" block class="bg-darkBlue text-white border-0" @click="router.push('/send')"><h5><i class="fa-regular fa-fw fa-paper-plane"></i> 發送名片</h5></van-button>
+
+      </div>
     </div>
 
     <!-- <Footer /> -->

src/views/Member/index.vue

@@ -2,19 +2,19 @@
 import _ from 'lodash'
 import axios from 'axios'
 
-import { ref , nextTick} from 'vue'
+import { ref , nextTick, onBeforeMount} from 'vue'
 
 import { Cropper } from 'vue-advanced-cropper';
 import 'vue-advanced-cropper/dist/style.css';
 
-import Footer from '@/components/Footer.vue'
+// import Footer from '@/components/Footer.vue'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
 
 import { showToast } from 'vant'
 import { showLoadingToast,showSuccessToast } from 'vant';
 
-import { getUserInfo , updateCard , getMovie } from '@/api'
+import { getUserInfo , updateCard , searchConnection, addUserFavi, setUserNfcTpl} from '@/api'
 
 const URL = window.URL || window.webkitURL;
 
@@ -22,7 +22,8 @@ const store = useStore()
 const router = useRouter()
 
 const form = ref({addon:[]})
-const activeName = ref(0)
+
+const genderChecked = ref()
 
 
 const fileList = ref([]);
@@ -62,8 +63,7 @@ const validatorTel = (val) => {
 // onMounted(async ()=>{
   let userRes = await getUserInfo()
   if(userRes.code===200){
-    form.value = userRes.data
+    form.value = userRes.data    
-    console.log(form);
   }else{
 
   }
@@ -110,10 +110,6 @@ const onCrop = () => {
   return
 }
 
-const onClose = () =>{
-  crop.value.show = false
-}
-
 const afterRead = async(file, name) => {
   crop.value.show = true
   
@@ -159,12 +155,89 @@ const onSubmit = async () => {
     if(res.code===200){
         showSuccessToast('更新成功')
         store.commit('user/setUserInfo',form.value)
-        router.push('/')
+        router.push('/member')
     }else{
         showToast.fail('更新失敗')
     }
 };
 
+const searchChecked = ref(true);
+const searchOnUpdateValue = (newValue) => {
+  showConfirmDialog({
+    title: '提醒',
+    message: '是否切换开关？',
+  }).then(() => {
+    searchChecked.value = newValue;
+  });
+};
+
+const tab2result = ref('');
+const tab2showPicker = ref(false);
+const tab2columns = [
+  { text: '台北', value: 'Taipei' },
+  { text: '桃園', value: 'Taoyuan' },
+  { text: '台中', value: 'Taichung' },
+  { text: '彰化', value: 'Changhua' },
+  { text: '高雄', value: 'Kaohsiung' },
+];
+
+const tab2list = ref([]);
+const tab2Loading = ref(false);
+const tab2Finished = ref(false);
+const tab2TodoLists = ref([]);
+const tab2AddFriend = ref([]);
+onBeforeMount(async () => {
+    let res = await searchConnection();
+    console.log(res);
+    if(res.code===200){
+      tab2list.value = res.data;
+    }
+
+    res = await addUserFavi({uf_user_id:form.value.user_id});
+    // console.log(res);
+    if(res.code===200){
+      tab2AddFriend.value = res.data;
+    }
+});
+
+const tab2ListonLoad = () => {
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  // setTimeout(() => {
+  //   for (let i = 0; i < 10; i++) {
+  //     tab2list.value.push(tab2list.value.length + 1);
+  //   }
+
+  //   // 加载状态结束
+  //   tab2Loading.value = false;
+
+  //   // 数据全部加载完成
+  //   if (tab2list.value.length >= 40) {
+  //     tab2Finished.value = true;
+  //   }
+  // }, 1000);
+};
+
+const tab2OnConfirm = ({ selectedOptions }) => {
+  tab2result.value = selectedOptions[0]?.text;
+  tab2showPicker.value = false;
+};
+
+const tab2searchValue = ref('');
+const tab2OnSearch = () => {
+  // tab2TodoLists = tab2list.filter(tab2searchValue);
+  // console.log(tab2TodoLists)
+};
+
+const tab3list = ref([]);
+onBeforeMount(async () => {
+    let res = await setUserNfcTpl();
+    console.log(res);
+    if(res.code===200){
+      tab3list.value = res.data;
+    }
+});
+
 </script>
 
 <template>
@@ -189,7 +262,7 @@ const onSubmit = async () => {
       </van-tab>
     </van-tabs>
 
-    <div class="content" v-show="tabActive === 0">      
+    <div class="content cnt0" v-show="tabActive === 0">      
         <van-cell-group inset>
           <van-form @submit="onSubmit">
             <div class="text-center p-4">
@@ -274,65 +347,43 @@ const onSubmit = async () => {
               placeholder="請輸入您的地址"
             />
             <van-field
-              v-model="form.url"
+              v-model="form.age"
               label="年齡"
               name=""
               placeholder="請輸入您的年齡"   
             />
             <van-field name="radio" label="性別">
               <template #input>
-                <van-radio-group v-model="checked" direction="horizontal">
+                <van-radio-group
+                  v-model="genderChecked" 
+                  direction="horizontal"
+                  checked-color="#345068"
+                >
                   <van-radio name="1">男</van-radio>
                   <van-radio name="2">女</van-radio>
                 </van-radio-group>
               </template>
             </van-field>
 
-
             <van-field
-              v-model="fieldValue"
+              v-model="form.area"
-              is-link
-              readonly
               label="區域"
+              name=""
               placeholder="請選擇縣市區域"
-              @click="show = true"
             />
-            <van-popup v-model:show="show" round position="bottom">
-              <van-cascader
-                v-model="cascaderValue"
-                title="請選擇縣市區域"
-                :options="options"
-                @close="show = false"
-                @finish="onFinish"
-              />
-            </van-popup>
-
-
             <van-field
-              v-model="fieldValue"
+              v-model="form.work"
-              is-link
-              readonly
               label="工作性質"
+              name=""
               placeholder="請選擇工作性質"
-              @click="show = true"
+            />            
-            />
-            <van-popup v-model:show="show" round position="bottom">
-              <van-cascader
-                v-model="cascaderValue"
-                title="請選擇工作性質"
-                :options="options"
-                @close="show = false"
-                @finish="onFinish"
-              />
-            </van-popup>
-            
 
             <van-field readonly>
               <template #label>是否公開<br/>資料搜尋</template>
               <template #input>
                 <van-switch
-                  v-model="adSwitchStatus"
+                  v-model="searchChecked"
-                  @update:model-value="onUpdateValue"
+                  @update:model-value="searchOnUpdateValue"
                   size="18px"
                   active-color="#345068"
                   inactive-color="#888888"
@@ -351,168 +402,338 @@ const onSubmit = async () => {
         </van-cell-group>
 
         <van-cell-group inset>
-          <van-form @submit="onSubmit12">
+          <van-form @submit="onSubmit">
-            <van-nav-bar class="bg-lightPink">
+            <van-cell class="text-center bg-lightPink py-3">
               <template #title>
                 <h6 class="text-darkBlue"><strong>人脈資訊</strong></h6>
               </template>
-            </van-nav-bar>
+            </van-cell>
 
             <van-field 
+              v-model="form.note"
               name="pattern" 
               placeholder="請輸入簡短的自我介紹" 
               label-align="top" 
             >
               <template #label>
-                <h6><i class="fa-regular fa-gem text-darkBlue"></i> 一句話介紹自己</h6>
+                <i class="fa-regular fa-gem text-darkBlue"></i> 一句話介紹自己
               </template>
             </van-field>
             
-            <van-collapse v-model="activeName" accordion>
+            <van-collapse accordion>
               <van-collapse-item name="1">
                 <template #title>
-                  <h6><i class="fa-regular fa-gem text-darkBlue"></i> 我能分享的資源</h6>
+                  <i class="fa-regular fa-gem text-darkBlue"></i> 我能分享的資源
                 </template>
                 <van-field  
-                  rows="3" 
+                  v-model="form.supply"
+                  rows="3"  
                   type="textarea"
                   maxlength="100" 
                   placeholder="請填寫能分享的資源" 
                   show-word-limit 
-                >                  
+                />  
-                </van-field>
                 <van-field 
+                  v-model="form.supply_link"
                   name="pattern" 
                   placeholder="分享網址" 
+                  :rules="[
+                     { validator: validatorUrl, message: '網址格式不正確,Ex. http://' },
+                  ]"
                 />
               </van-collapse-item>
-              <van-collapse-item title="标题2" name="2">
+              <van-collapse-item name="2">
-                技术无非就是那些开发它的人的共同灵魂。
+                <template #title>
+                  <i class="fa-regular fa-gem text-darkBlue"></i> 我需要的資源
+                </template>
+                <van-field  
+                  v-model="form.demand"
+                  rows="3" 
+                  type="textarea"
+                  maxlength="100" 
+                  placeholder="請填寫能分享的資源" 
+                  show-word-limit 
+                />   
+                <van-field 
+                  v-model="form.demand_link"
+                  name="pattern" 
+                  placeholder="需求連結" 
+                />      
               </van-collapse-item>
-              <van-collapse-item title="标题3" name="3">
+              <van-collapse-item name="3">
-                在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+                <template #title>
+                  <i class="fa-regular fa-gem text-darkBlue"></i> 菁英交流資訊
+                </template>
+                <van-field  
+                  v-model="form.exchange"
+                  rows="3" 
+                  type="textarea"
+                  maxlength="100" 
+                  placeholder="請填寫能分享的資源" 
+                  show-word-limit 
+                />  
+                <van-field 
+                  v-model="form.exchange_link"
+                  name="pattern" 
+                  placeholder="需求連結" 
+                /> 
               </van-collapse-item>
             </van-collapse>
 
-            
+            <div class="p-5">
+              <van-button block class="btn-darkBlue" native-type="submit">
+                確認修改
+              </van-button>
+            </div>
           </van-form>
         </van-cell-group>
     </div>
-    <!-- <div class="content" v-show="tabActive === 1" v-for="(v,idx) in form.addon" :key="idx">  -->
+
-    <div class="content" v-show="tabActive === 1"> 
+    <div class="content cnt1" v-show="tabActive === 1"> 
         <van-cell-group inset>
-          <van-form @submit="onSubmit2">            
+          <van-form @submit="onSubmit">            
-            <van-field
-              v-model="form.real_name"
-              label="姓名"
-              name="pattern"
-              placeholder="請輸入您的姓名"
-              :rules="[{ required: true, message: '姓名為必填' }]"
-            />
             <van-field
-              v-model="form.company"
+              v-model="form.nfcurl"
-              label="公司名稱"
+              label="個人網頁"
               name=""
-              placeholder="請輸入您的公司名稱"
+              placeholder="請輸入您的個人網頁"
-              :rules="[{ required: true, message: '公司名稱必填' }]"
             />
             <van-field
-              v-model="form.title"
+              v-model="form.line"
-              label="職稱"
+              label="Line"
-              name=""
-              placeholder="請輸入您的職稱"
-            />
-            <van-field
-              v-model="form.phone"
-              label="手機"
               name=""
-              type="tel"
+              placeholder="請輸入您的Line ID"
-              placeholder="Ex. 0900000001 不要有空格"
-              :rules="[{ required: true, message: '手機號必填' },{ pattern: /\d{10}/ , message: '手機號格式錯誤' }]"
             />
             <van-field
-              v-model="form.tel"
+              v-model="form.facebook"
-              label="市話"
+              label="Facebook"
               name=""
-              type="tel"
+              placeholder="請輸入您的Facebook"
-              placeholder="請輸入您的市話"
-              :rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]"      
             />
             <van-field
-              v-model="form.email"
+              v-model="form.ig"
-              label="Email"
+              label="IG"
               name=""
-              placeholder="請輸入您的Email"
+              placeholder="請輸入您的IG"
-              :rules="[{ required: true, message: 'Email必填' },{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
             />
             <van-field
-              v-model="form.address"
+              v-model="form.youTube"
-              label="住址"
+              label="YouTube"
               name=""
-              placeholder="請輸入您的地址"
+              placeholder="請輸入您的YouTube"
             />
             <van-field
-              v-model="form.url"
+              v-model="form.wechat"
-              label="年齡"
+              label="WeChat"
               name=""
-              placeholder="請輸入您的年齡"   
+              placeholder="請輸入您的WeChat"
             />
 
-            <div class="p-5">
+            <div class="px-5 py-4">
               <van-button block class="btn-darkBlue" native-type="submit">
-                確認修改
+                <h6>確認修改</h6>
               </van-button>
             </div>
           </van-form>
         </van-cell-group>
 
-        <!-- <van-cell-group inset>
+        <van-cell-group inset>
-          <div class="text-center">
+          <van-form @submit="onSubmit">  
-            <van-button type="primary" icon="arrow-up" plain hairline @click="onMoveBtn(0,idx)">上移</van-button>
+            <van-cell class="bg-lightPink">
-            <van-button type="primary" icon="arrow-down" plain hairline @click="onMoveBtn(1,idx)">下移</van-button>
+              <template #title>
-            <van-button type="danger" icon="delete-o" plain hairline @click="onDelBtn(idx)">刪除</van-button>
+                <h6 class="text-darkBlue"><strong>相關連結</strong></h6>
-          </div>
+              </template>
-          <van-field
+              <template #value>
-            label="名稱"
+                <van-button size="small" class="btn-outline-darkBlue" @click="onAddBtn">
-            name=""
+                  <h6>新增連結</h6>
-            v-model="form.addon[idx].name"
+                </van-button>
-            placeholder="按鈕名稱"
+              </template>
-          />
+            </van-cell>
-          <van-field
+
-            label="連結"
+            <van-field v-for="(item,idx) in form.addon" :key="idx">
-            name=""
+                <template #label>
-            v-model="form.addon[idx].link"
+                  <van-field
-            placeholder="按鈕連結"
+                    v-model="item.name"
-          />
+                    name=""
-          <div class="add-btn" @click="onAddBtn">
+                    maxlength="10" 
-            <van-button type="success" plain hairline>新增按鈕</van-button>
+                    placeholder="請輸入您的連結名稱" 
-          </div>
+                    :rules="[{ required: true, message: '連結名稱必填' }]"
-        </van-cell-group> -->
+                  />
+                </template>
+                <template #input>
+                  <van-field
+                    v-model="item.link"
+                    name=""
+                    placeholder="請輸入您的按鈕連結" 
+                    :rules="[{ required: true, message: '按鈕連結必填' }]"
+                  />
+                </template>
+                <template #button>
+                  <van-button size="small" class="ml-1 btn-tomatoRed" icon="delete-o" hairline @click="onDelBtn(idx)"></van-button>
+                  <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-up" hairline @click="onMoveBtn(0,idx)"></van-button>
+                  <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-down" plain hairline @click="onMoveBtn(1,idx)"></van-button>
+                </template>
+            </van-field>
+
+            <!-- <van-swipe-cell v-for="(item,idx) in form.addon" :key="idx">
+              <template #left>
+                <van-button type="danger" icon="delete-o" plain hairline @click="onDelBtn(idx)">刪除</van-button>
+              </template>              
+              <van-field
+                v-model="item.name"
+                name=""
+                placeholder="請輸入您的連結名稱"
+                :rules="[{ required: true, message: '連結名稱必填' }]"
+              />
+              <van-field
+                v-model="item.link"
+                name=""
+                placeholder="請輸入您的按鈕連結" 
+                :rules="[{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
+              />
+              <template #right>
+                <van-button type="primary" icon="arrow-up" plain hairline @click="onMoveBtn(0,idx)">上移</van-button>
+                <van-button type="primary" icon="arrow-down" plain hairline @click="onMoveBtn(1,idx)">下移</van-button>              
+              </template>
+            </van-swipe-cell> -->
+
+            <div class="px-5 py-4">
+              <van-button block class="btn-darkBlue" native-type="submit">
+                <h6>確認修改</h6>
+              </van-button>
+            </div>
+          </van-form>
+        </van-cell-group>
     </div>
-    <div class="content" v-show="tabActive === 2"> 
+
+    <div class="content cnt2" v-show="tabActive === 2"> 
       <van-cell-group inset>
-        <form action="/">
+        <van-row align="center">
-          <van-search
+          <van-col span="8">
-            v-model="value"
+            <van-field
-            show-action
+              v-model="tab2result"
-            placeholder="请输入搜索关键词"
+              is-link
-            @search="onSearch"
+              readonly
-            @cancel="onCancel"
+              name="picker" 
-          />
+              border="false" 
-          <van-list
+              placeholder="縣市"
-            v-model:loading="loading"
+              @click="tab2showPicker = true"
-            :finished="finished"
+            />
-            finished-text="没有更多了"
+            <van-popup v-model:show="tab2showPicker" position="bottom">
-            @load="onLoad"
+              <van-picker
-          >
+                :columns="tab2columns"
-            <van-cell v-for="item in list" :key="item" :title="item" />
+                @confirm="tab2OnConfirm"
-          </van-list>
+                @cancel="tab2showPicker = false"
-        </form>
+              />
+            </van-popup>
+          </van-col>
+          <van-col span="16">
+            <van-search
+              v-model="tab2searchValue"
+              placeholder="請輸入搜尋關鍵字"
+              @search="tab2OnSearch"
+            />
+          </van-col>
+        </van-row>
+
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="tab2ListonLoad"   
+          class="accordion" 
+          id="accordion"       
+        >
+          <!-- <van-cell v-for="item in list" :key="item" :title="item" >  -->
+          <!-- <van-cell v-for="item in tab2list" :key="item" :title="item"> 
+            <template #title>
+              <div class="list-item">
+                <div class="avatar"><img :src="item.avatar"></div>
+                <div class="text">
+                  <h5 class="name ellipsis">{{item.real_name}}</h5>
+                  <div class="desc ellipsis">@{{item.note}}</div>
+                </div>
+              </div>
+            </template>
+            <template #value>
+              <van-button size="normal" class="border-0"><h5><i class="fa-solid fa-layer-group text-darkBlue"></i></h5></van-button>
+              <van-button size="normal" class="border-0"><h5><i class="fa-solid fa-comment-medical text-darkBlue"></i></h5></van-button>
+            </template>
+          </van-cell>     -->
+
+          <div class="list-item" v-for="(item, index) in tab2list" :key="index">
+            <div class="left">
+              <div class="avatar"><img :src="item.avatar"></div>
+              <div class="text">
+                <h5 class="name ellipsis">{{item.real_name}}</h5>
+                <div class="desc ellipsis">@{{item.note}}</div>
+              </div>
+            </div>
+            <div class="right">
+              <van-button size="normal" class="border-0" data-toggle="collapse" :href="`#c${index}`" role="button" aria-expanded="false" :aria-controls="`c${index}`">
+                <h5><i class="fa-solid fa-layer-group text-darkBlue"></i></h5>
+              </van-button>
+              <van-button size="normal" class="border-0"><h5><i class="fa-solid fa-comment-medical text-darkBlue"></i></h5></van-button>
+            </div>
+            <div class="bottom collapse" :id="`c${index}`" data-parent="#accordion">
+              <h6 class="text-darkBlue"><strong>我能分享的資源</strong></h6>
+              <div class="desc">{{item.supply}}</div>
+              <div class="url py-2">網址：<a href=""></a></div>
+              <hr/>
+              <h6 class="text-darkBlue"><strong>我需要的資源</strong></h6>
+              <div class="desc">{{item.demand}}</div>
+            </div>
+          </div>
+
+        </van-list>
+        
       </van-cell-group>
+
+
     </div>
-    <div class="content" v-show="tabActive === 3"> 
+
+    <div class="content cnt3" v-show="tabActive === 3"> 
+      <van-cell-group inset>
+        <van-form @submit="onSubmit">
+          <van-cell class="text-center bg-lightPink py-3">
+            <template #title>
+              <h6 class="text-darkBlue"><strong>感應式版型切換</strong></h6>
+            </template>
+          </van-cell>
+
+          <div class="text-center bg-dark px-5 pt-3">
+            <van-image 
+              width="100%" 
+              height="500"
+              position="top" 
+              fit="cover"
+              src="/src/assets/images/tp/tp_1.jpg"
+            />
+          </div>
+
+          <div class="d-flex justify-content-center py-3">
+              <van-button class="btn-tomatoRed px-5 mr-2">
+                預覽
+              </van-button>
+              <van-button class="btn-darkBlue px-5" native-type="submit">
+                確認修改
+              </van-button>
+          </div>
+        </van-form>
+      </van-cell-group>
+
       <van-cell-group inset>
-        test3
+        <van-row>
+          <van-col span="12" v-for="(item, index) in tab3list" :key="index">
+            <div class="imgBtn">
+              <div class="imgCnt">{{ item }}
+                <van-image 
+                  src="/src/assets/images/tp/tp_1.jpg"
+                />
+              </div>      
+            </div>
+          </van-col>
+        </van-row>
       </van-cell-group>
     </div>
 
@@ -544,5 +765,76 @@ const onSubmit = async () => {
 <style src="@/assets/css/main.css"></style>
 
 <style lang="less" scoped>
-
+.cnt2{
+  .van-list{
+    .list-item{
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      padding: 15px 0;
+      margin:0 15px;
+      border-bottom: 1px #e3e3e3 solid;
+      .left{      
+        flex:1 0 0%;
+        display: flex;
+        align-items: center;
+        .avatar{
+          width: 55px;
+          aspect-ratio: 1/1;
+          border-radius: 50%;
+          margin-right: 10px;
+          overflow: hidden;
+          img{
+            width:100%;
+            height:100%;
+            object-fit: cover;
+          }
+        }
+        .name{
+          font-weight: bold;
+        }
+      }
+      .right{
+        flex:0 0 auto;
+      }
+      .bottom{
+        flex:1 0 100%;
+        border: 1px #e3e3e3 solid;
+        border-radius: 10px;
+        padding: 0 10px;
+        margin: 0;
+        transition: all .2s;
+        &.show{
+          padding: 10px;
+          margin: 5px 0;
+        }
+      }
+    }
+  }
+} 
+
+.cnt3{
+  .imgBtn{
+    padding: 10px;
+    margin: 10px;
+    background-color: #333;
+    border-radius: 10px;
+    overflow: hidden;
+    cursor: pointer;
+    transform: scale(1);
+    transition: all .3s;
+    &.active,&:hover{
+      transform: scale(1.02);
+    }
+    .imgCnt{
+      width:100%;
+      height: 150px;
+      img{
+        width:100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+} 
 </style>