update

css/list-style-mb.css

@@ -632,6 +632,7 @@ a {
   margin: 0;
   width: 25%;
   text-align: center;
+  max-width: 25%;
 }
 
 .infoContent .nav-item-link {
@@ -726,20 +727,20 @@ a {
 
 .infoContent .company__title {
   color: #AAAAAA;
-  font-size: 1.125rem;
-  font-weight: bold;
+  font-size: 1.12rem;
+  font-weight: 400;
 }
 
 .infoContent .company__text {
   color: #43484C;
 }
 
-.infoContent__navBlock {
-  padding-top: 0rem;
+.infoContent__navBlock.tab_sticky + .row {
+  padding-top: 65px;
 }
 
-.infoContent__navBlock.tab_sticky + .tab-content {
-  padding-top: 60.8px;
+.infoContent__navBlock {
+  padding-top: 0rem;
 }
 
 .freeCall {

css/list-style-mb.scss

@@ -533,6 +533,7 @@ a {
       margin: 0;
       width: 25%;
       text-align: center;
+      max-width: 25%;
       &-link {
           display: block;
           padding: 1rem 0.5rem;
@@ -609,20 +610,23 @@ a {
       }
       &__title {
           color: #AAAAAA;
-          font-size: 1.125rem;
-          font-weight: bold;
+          font-size: 1.12rem;
+          font-weight: 400;
       }
       &__text {
           color: #43484C;
       }
   }
 }
+
+.infoContent__navBlock.tab_sticky + .row {
+    padding-top: 65px;
+}
+
 .infoContent__navBlock {
     padding-top: 0rem;
 }
-.infoContent__navBlock.tab_sticky + .tab-content {
-    padding-top: 60.8px;
-}
+
 
 .freeCall {
     position: fixed;

css/list-style.css

@@ -669,7 +669,7 @@ a {
 .content .infoCard__detail__l.title {
   color: #AAAAAA;
   font-size: 1.125rem;
-  font-weight: bold;
+  font-weight: 400;
   -webkit-transform: translateX(-15px);
           transform: translateX(-15px);
 }
@@ -1119,4 +1119,39 @@ a {
 #pills-intro .work__row .col-md-4:nth-of-type(2) {
   margin-top: .5rem;
 }
+
+.emodal-title {
+  color: #EE7800;
+  margin: 0 auto;
+  font-size: 18px;
+}
+
+.emodal .form-control:focus {
+  border-color: #ffb76f;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.emodal .btn-plus {
+  color: #aaa;
+  border-color: #aaa;
+}
+
+.emodal .btn-send {
+  background-color: #ee7800;
+  color: white;
+  width: 30%;
+  border: none;
+  padding: 0.875rem 1rem;
+  border-radius: 2px;
+}
+
+.emodal .btn-dismiss {
+  width: 30%;
+  border: none;
+  padding: 0.875rem 1rem;
+  background-color: #d1d2d3;
+  border-radius: 2px;
+  color: #fff;
+}
 /*# sourceMappingURL=list-style.css.map */

css/list-style.scss

@@ -568,7 +568,7 @@ a {
             &.title {
                 color: #AAAAAA;
                 font-size: 1.125rem;
-                font-weight: bold;
+                font-weight: 400;
                 transform: translateX(-15px);
             }
         }
@@ -915,4 +915,36 @@ a {
             margin-top: .5rem;
         }
     }
+}
+
+.emodal {
+    &-title {
+        color: #EE7800;
+        margin: 0 auto;
+        font-size: 18px;;
+    }
+    .form-control:focus {
+        border-color: #ffb76f;
+        box-shadow: none;
+    }
+    .btn-plus {
+        color: #aaa;
+        border-color: #aaa;
+    }
+    .btn-send {
+        background-color: #ee7800;
+        color: white;
+        width: 30%;
+        border: none;
+        padding: 0.875rem 1rem;
+        border-radius: 2px;
+    }
+    .btn-dismiss {
+        width: 30%;
+        border: none;
+        padding: 0.875rem 1rem;
+        background-color: #d1d2d3;
+        border-radius: 2px;
+        color: #fff;
+    }
 }

index_designerList.html

@@ -1470,6 +1470,47 @@
               </div>
             </div>
           </div>
+          <div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered emodal">
+              <div class="modal-content">
+                <div class="modal-header text-center border-0">
+                  <h5 class="modal-title font-weight-bold emodal-title" id="forwardModalLabel">轉寄好友</h5>
+                </div>
+                <div class="modal-body">
+                  <div class="col">
+                    <div class="input-group">
+                      <input type="text" class="form-control fm-input-border" placeholder="收件人email" name="email" v-model="email" id="email">
+                      <div class="input-group-append">
+                        <button class="btn btn-plus" id="putEmail" type="button" @click="putEmail()">
+                        <i class="fa fa-plus fm-plus" aria-hidden="true"></i></button>
+                      </div>
+                    </div>
+                    <div class="text-right">
+                      <small class="text-danger" id="error"></small>
+                    </div>
+                  </div>
+                  <div class="col mb-3 d-flex flex-wrap">
+                    <span class="text-primary fm-email-btnWrapper m-1" id="putEmail_hidden" style="display: none;">
+                      <span class="fm-email-btn">
+                        <small class="mr-1" id="add_email"></small>
+                        <i class="fa fa-times-circle fm-close" aria-hidden="true" @click="del_email(e)"></i>
+                      </span>
+                    </span>
+                  </div>
+                  <div class="col mb-3">
+                    <input type="text" class="form-control font-weight-bold " v-model="forward_title" id="title" value="澄羿空間設計室內裝修有限公司" placeholder="澄羿空間設計室內裝修有限公司">
+                  </div>
+                  <div class="col mb-3">
+                    <textarea class="form-control" id="content" rows="5" name="content" v-model="content" placeholder="內容"></textarea>
+                  </div>
+                </div>
+                <div class="modal-button-wrapper d-flex justify-content-center mb-4">
+                  <a class="btn modal-button me-2 btn-send active" @click="doSend()" id="doSend">送出</a>
+                  <a class="btn modal-button btn-dismiss" data-bs-dismiss="modal" aria-label="Close">取消</a>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="modal fade" id="favorModal" tabindex="-1" aria-labelledby="favorModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered">
               <div class="modal-content">

js/index-designer.js

@@ -236,7 +236,7 @@ function renderinfoCard(designer) {
                         <img src="https://hhh.com.tw/assets/images/rv_web/like.svg" class="like" alt="">
                     </span>`;
         } else if (i === 3) {
-            mediaStr += `<span class="send">
+            mediaStr += `<span class="send" data-bs-toggle="modal" data-bs-target="#emailModal">
                             <img src="${designer['scMedia'][i].img}" alt="">
                         </span>`;
         }

js/index-list-mb.js

@@ -14,12 +14,19 @@ let totalPages = {
 
 let filter;
 
+const urlParams = new URLSearchParams(window.location.search);
+let getfilter = urlParams.get('q');
+let cid = urlParams.get('cid');
+console.log(getfilter, cid);
+
 $('.likeSee__views').click(function() {
-  window.location.href = './index_designerList_mb.html'
+  window.location.href = `./index_designerList_mb.html?q=views&cid=${cid}`
+  $(this).css('color', '#EE7800');
 })
 
 $('.likeSee__sort').click(function() {
-  window.location.href = './index_designerList_mb.html?q=dateSort'
+  window.location.href = `./index_designerList_mb.html?cid=${cid}`
+  $(this).css('color', '#EE7800');
 })
 
 function getpathId(){
@@ -28,12 +35,14 @@ function getpathId(){
 }
 
 function getQuery() {
-  let query = getpathId();
+  let query = getfilter;
   console.log(query);
-  if(query == 'dateSort'){
-      filter = 'dateSort';
+  if(query == 'views'){
+    filter = 'views';
+    $('.likeSee__views').css('color', '#EE7800');
   } else {
-      filter = 'views';
+    filter = 'dateSort';
+    $('.likeSee__sort').css('color', '#EE7800');
   }
 }
 
@@ -52,7 +61,7 @@ window.onload = function(){
   let id = 0;
   $.ajax({
     method: "GET",
-    url: "./json/designers.json",
+    url: `./json/designers-${cid}.json`,
     dataType: "json",
   }).done(function (msg) {
     getQuery();