修正

about/about.css

@@ -197,6 +197,12 @@ body .arrow:hover {
   position: relative;
 }
 
+#banner #about-title {
+  position: absolute;
+  right: 50px;
+  top: 100px;
+}
+
 #banner #bannerdes-img {
   position: absolute;
   z-index: -1;
@@ -224,7 +230,7 @@ body .arrow:hover {
 }
 
 #banner #banner-container {
-  padding-top: 10vw;
+  padding-top: 15vw;
   width: 90vw;
 }
 
@@ -398,7 +404,13 @@ body .arrow:hover {
   }
 }
 
-#banner #banner-container .tab-content .sec02 .col-lg-4:hover .sec02-p-m, #banner #banner-container .tab-content .sec02 .col-lg-4:hover .sec03-p-m,
+#banner #banner-container .tab-content .sec02 .col-lg-4:hover .play1,
+#banner #banner-container .tab-content .sec04 .col-lg-4:hover .play1 {
+  opacity: 1;
+}
+
+#banner #banner-container .tab-content .sec02 .col-lg-4:hover .sec02-p-m,
+#banner #banner-container .tab-content .sec02 .col-lg-4:hover .sec03-p-m,
 #banner #banner-container .tab-content .sec04 .col-lg-4:hover .sec02-p-m,
 #banner #banner-container .tab-content .sec04 .col-lg-4:hover .sec03-p-m {
   opacity: 1;
@@ -434,6 +446,34 @@ body .arrow:hover {
   transition: 0.3s ease-in-out;
 }
 
+#banner #banner-container .tab-content .sec02 .col-lg-4 .sec03-img-m,
+#banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-img-m {
+  text-align: center;
+  width: 100%;
+  position: absolute;
+  top: 100px;
+}
+
+#banner #banner-container .tab-content .sec02 .col-lg-4 .sec03-img-m1,
+#banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-img-m1 {
+  text-align: center;
+  width: 100%;
+  position: absolute;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec02 .col-lg-4 .sec03-img-m1,
+  #banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-img-m1 {
+    top: 80px;
+  }
+}
+
+#banner #banner-container .tab-content .sec02 .col-lg-4 .sec03-img-m1 .play1,
+#banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-img-m1 .play1 {
+  width: 50px !important;
+  height: 50px !important;
+}
+
 #banner #banner-container .tab-content .sec03 .col-lg-4 {
   position: relative;
   background: #80ab29;
@@ -477,11 +517,8 @@ body .arrow:hover {
   opacity: 1;
 }
 
-#banner #banner-container .tab-content .sec03 .col-lg-4:hover .play {
-  opacity: 0;
-}
-
-#banner #banner-container .tab-content .sec03 .col-lg-4:hover .sec02-p-m, #banner #banner-container .tab-content .sec03 .col-lg-4:hover .sec03-p-m {
+#banner #banner-container .tab-content .sec03 .col-lg-4:hover .sec02-p-m,
+#banner #banner-container .tab-content .sec03 .col-lg-4:hover .sec03-p-m {
   opacity: 1;
 }
 
@@ -504,7 +541,7 @@ body .arrow:hover {
 #banner #banner-container .tab-content .sec03 .col-lg-4 img {
   -o-object-fit: cover;
      object-fit: cover;
-  width: 450px !important;
+  width: 435px !important;
   height: 200px !important;
   opacity: 1;
   -webkit-transition: 0.3s ease-in-out;
@@ -518,22 +555,6 @@ body .arrow:hover {
   top: 100px;
 }
 
-#banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-img-m .play {
-  width: 50px !important;
-  height: 50px !important;
-}
-
-@media screen and (max-width: 767px) {
-  #banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-img-m .play {
-    display: none;
-  }
-}
-
-#banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-img-m .play1 {
-  width: 50px !important;
-  height: 50px !important;
-}
-
 #banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-img-m1 {
   text-align: center;
   width: 100%;
@@ -596,6 +617,10 @@ body .arrow:hover {
   }
 }
 
+#banner #banner-container .tab-content .sec04 .col-lg-4:hover .play1 {
+  opacity: 1;
+}
+
 #banner #banner-container .tab-content .sec04 .col-lg-4:hover .sec04-p-m {
   opacity: 1;
 }
@@ -626,6 +651,30 @@ body .arrow:hover {
   transition: 0.3s ease-in-out;
 }
 
+#banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-img-m {
+  text-align: center;
+  width: 100%;
+  position: absolute;
+  top: 100px;
+}
+
+#banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-img-m1 {
+  text-align: center;
+  width: 100%;
+  position: absolute;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-img-m1 {
+    top: 80px;
+  }
+}
+
+#banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-img-m1 .play1 {
+  width: 50px !important;
+  height: 50px !important;
+}
+
 #banner #banner-container .tab-content .sec04 .sec04-1 .sec05-row {
   background: rgba(0, 0, 0, 0.8);
   text-align: center;

about/about.scss

@@ -24,25 +24,22 @@ body {
     .arrow {
         position: fixed;
         right: 30px;
-        top:500px;
+        top: 500px;
         width: 45px;
         height: 40px;
         z-index: 10;
-        
-        a{
+
+        a {
             margin: 30px 0px;
         }
-        .icon{
-           
+        .icon {
             @media screen and(max-width:$moblie) {
                 display: none;
-                
             }
         }
         &:hover {
             box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
         }
-       
     }
 }
 #Navigation {
@@ -166,17 +163,21 @@ body {
 }
 #banner {
     position: relative;
-    #bannerdes-img{
+    #about-title {
         position: absolute;
-        z-index:-1;
+        right: 50px;
+        top: 100px;
+    }
+    #bannerdes-img {
+        position: absolute;
+        z-index: -1;
         opacity: 1;
-        .banner-img{
+        .banner-img {
             width: 100vw;
             height: 70vh;
             object-fit: cover;
             @media screen and(max-width:$moblie) {
                 height: 80vh;
-            
             }
         }
     }
@@ -186,7 +187,7 @@ body {
         background-repeat: no-repeat;
     }
     #banner-container {
-        padding-top: 10vw;
+        padding-top: 15vw;
         width: 90vw;
         @media screen and(max-width:$moblie) {
             width: 95vw;
@@ -203,15 +204,13 @@ body {
                 }
             }
             .banner-3 {
-              
                 img {
-                 margin-bottom: -45px;
+                    margin-bottom: -45px;
                 }
             }
         }
 
         .banner-m {
-           
             @media screen and(min-width:$desktop) {
                 display: none;
             }
@@ -225,28 +224,27 @@ body {
                 }
             }
         }
-   
-        ul {
 
+        ul {
             text-align: center;
             background: rgba(141, 194, 31, 0.8);
             @media screen and(min-width:$desktop) {
-              margin-left: 8px;
+                margin-left: 8px;
             }
             @media screen and(max-width:$moblie) {
                 margin-top: 5vw;
-                margin:10px auto ;
+                margin: 10px auto;
             }
             .nav-item {
                 padding: 10px;
-               
+
                 @media screen and(max-width:$moblie) {
                     padding: 6px;
                 }
-                .nav-item2{
+                .nav-item2 {
                     position: relative;
                     &:after {
-                        content:url(../img/about/sec01/item-arrow.png);
+                        content: url(../img/about/sec01/item-arrow.png);
                         display: block;
                         width: 80%;
                         height: 5px;
@@ -255,23 +253,19 @@ body {
                         bottom: 0;
                         transition: all 0.3s;
                         opacity: 0;
-                       
                     }
-                   
+
                     // &:active:after,
                     // &:focus:after{
                     //     opacity: 1;
                     // }
-                    .after-nav{
-                       
+                    .after-nav {
                         opacity: 1;
                     }
-                    &:focus:after
-                   {
+                    &:focus:after {
                         width: 80%;
                         opacity: 1;
-                       
-                }
+                    }
                 }
             }
         }
@@ -302,9 +296,9 @@ body {
                 background-repeat: no-repeat;
                 background-blend-mode: overlay;
                 word-break: break-all;
-                a{
+                a {
                     text-decoration: none;
-                    color:#fff;
+                    color: #fff;
                 }
                 @media screen and(max-width:$moblie) {
                     padding: 18px;
@@ -313,14 +307,13 @@ body {
             // 個案賞析
             .sec02,
             .sec04 {
-                
                 .col-lg-4 {
                     position: relative;
                     background: rgb(128, 171, 41);
                     transition: 0.3s ease-in-out;
                     cursor: pointer;
-                    .sec02-p-m{
-                        color:#fff;
+                    .sec02-p-m {
+                        color: #fff;
                         text-align: center;
                         font-size: 14px;
                         transition: 0.3s;
@@ -328,18 +321,22 @@ body {
                         @media screen and(min-width:$desktop) {
                             width: 100%;
                             position: absolute;
-                            top:100px;
-                            left:0px;
+                            top: 100px;
+                            left: 0px;
                             font-size: 18px;
-                           opacity: 0;
+                            opacity: 0;
                         }
                     }
-         
-                    &:hover{
-                        .sec02-p-m,.sec03-p-m{
+
+                    &:hover {
+                        .play1 {
                             opacity: 1;
                         }
-                        img{
+                        .sec02-p-m,
+                        .sec03-p-m {
+                            opacity: 1;
+                        }
+                        img {
                             opacity: 0.2;
                             @media screen and(max-width:$moblie) {
                                 opacity: 1;
@@ -349,27 +346,42 @@ body {
                     @media screen and(max-width:$moblie) {
                         background: none;
                     }
-                   
+
                     img {
                         object-fit: cover;
                         width: 480px !important;
                         height: 280px !important;
                         opacity: 1;
                         transition: 0.3s ease-in-out;
-                       
+                    }
+                    .sec03-img-m {
+                        text-align: center;
+                        width: 100%;
+                        position: absolute;
+                        top: 100px;
+                    }
+                    .sec03-img-m1 {
+                        text-align: center;
+                        width: 100%;
+                        position: absolute;
+                        @media screen and(max-width:$moblie) {
+                            top: 80px;
+                        }
+                        .play1 {
+                            width: 50px !important;
+                            height: 50px !important;
+                        }
                     }
                 }
-
             }
-            .sec03{
-                
+            .sec03 {
                 .col-lg-4 {
                     position: relative;
                     background: rgb(128, 171, 41);
                     transition: 0.3s ease-in-out;
                     cursor: pointer;
-                    .sec03-p-m{
-                        color:#fff;
+                    .sec03-p-m {
+                        color: #fff;
                         text-align: center;
                         font-size: 14px;
                         transition: 0.3s;
@@ -377,34 +389,31 @@ body {
                         @media screen and(min-width:$desktop) {
                             width: 100%;
                             position: absolute;
-                            top:100px;
-                            left:0px;
+                            top: 100px;
+                            left: 0px;
                             font-size: 16px;
-                           opacity: 0;
+                            opacity: 0;
                         }
                     }
 
-                    .sec03-p-m{
-                        
+                    .sec03-p-m {
                         @media screen and(min-width:$desktop) {
                             position: absolute;
-                            top:50px;
-                            left:0px;
-                           background-size: contain;
-                           opacity: 0;
+                            top: 50px;
+                            left: 0px;
+                            background-size: contain;
+                            opacity: 0;
                         }
-                    }          
-                    &:hover{
-                        .play1{
+                    }
+                    &:hover {
+                        .play1 {
                             opacity: 1;
                         }
-                        .play{
-                            opacity: 0;
-                        }
-                        .sec02-p-m,.sec03-p-m{
+                        .sec02-p-m,
+                        .sec03-p-m {
                             opacity: 1;
                         }
-                        img{
+                        img {
                             opacity: 0.2;
                             @media screen and(max-width:$moblie) {
                                 opacity: 1;
@@ -414,49 +423,35 @@ body {
                     @media screen and(max-width:$moblie) {
                         background: none;
                     }
-                   
+
                     img {
                         object-fit: cover;
-                        width: 450px !important;
+                        width: 435px !important;
                         height: 200px !important;
                         opacity: 1;
                         transition: 0.3s ease-in-out;
-                       
                     }
-                    .sec03-img-m{
+                    .sec03-img-m {
                         text-align: center;
                         width: 100%;
                         position: absolute;
-                        top:100px;
-                        .play{
-                            width: 50px !important;
-                            height: 50px !important;
-                            @media screen and(max-width:$moblie) {
-                                display: none;
-                            }
-                        }
-                        .play1{
-                            width: 50px !important;
-                            height: 50px !important;
-                        }
+                        top: 100px;
                     }
-                    .sec03-img-m1{
+                    .sec03-img-m1 {
                         text-align: center;
                         width: 100%;
                         position: absolute;
-                       
                         @media screen and(max-width:$moblie) {
-                            top:80px;
+                            top: 80px;
                         }
-                        .play1{
+                        .play1 {
                             width: 50px !important;
                             height: 50px !important;
                         }
                     }
-                    }
-                .sec03-1{
-
-                    .sec05-row{
+                }
+                .sec03-1 {
+                    .sec05-row {
                         background: rgba(0, 0, 0, 0.8);
                         text-align: center;
                         height: 600px;
@@ -466,20 +461,18 @@ body {
                         p {
                             letter-spacing: 5px;
                         }
+                    }
                 }
-                }
-
             }
 
             .sec04 {
-                
                 .col-lg-4 {
                     position: relative;
                     background: rgb(128, 171, 41);
                     transition: 0.3s ease-in-out;
                     cursor: pointer;
-                    .sec04-p-m{
-                        color:#fff;
+                    .sec04-p-m {
+                        color: #fff;
                         text-align: center;
                         font-size: 14px;
                         transition: 0.3s;
@@ -487,18 +480,21 @@ body {
                         @media screen and(min-width:$desktop) {
                             width: 100%;
                             position: absolute;
-                            top:100px;
-                            left:0px;
+                            top: 100px;
+                            left: 0px;
                             font-size: 18px;
-                           opacity: 0;
+                            opacity: 0;
                         }
                     }
-          
-                    &:hover{
-                        .sec04-p-m{
+
+                    &:hover {
+                        .play1 {
+                            opacity: 1;
+                        }
+                        .sec04-p-m {
                             opacity: 1;
                         }
-                        img{
+                        img {
                             opacity: 0.2;
                             @media screen and(max-width:$moblie) {
                                 opacity: 1;
@@ -508,19 +504,35 @@ body {
                     @media screen and(max-width:$moblie) {
                         background: none;
                     }
-                   
+
                     img {
                         object-fit: cover;
                         width: 480px !important;
                         height: 280px !important;
                         opacity: 1;
                         transition: 0.3s ease-in-out;
-                       
+                    }
+                    .sec03-img-m {
+                        text-align: center;
+                        width: 100%;
+                        position: absolute;
+                        top: 100px;
+                    }
+                    .sec03-img-m1 {
+                        text-align: center;
+                        width: 100%;
+                        position: absolute;
+                        @media screen and(max-width:$moblie) {
+                            top: 80px;
+                        }
+                        .play1 {
+                            width: 50px !important;
+                            height: 50px !important;
+                        }
                     }
                 }
-                .sec04-1{
-
-                    .sec05-row{
+                .sec04-1 {
+                    .sec05-row {
                         background: rgba(0, 0, 0, 0.8);
                         text-align: center;
                         height: 600px;
@@ -530,9 +542,8 @@ body {
                         p {
                             letter-spacing: 5px;
                         }
+                    }
                 }
-                }
-                
             }
         }
     }
@@ -548,9 +559,9 @@ body {
         width: 95vw;
         padding-bottom: 30vw;
     }
-    a{
+    a {
         text-decoration: none;
-        color:#fff;
+        color: #fff;
     }
     p {
         color: #fff;

about/goto2.js

@@ -143,12 +143,11 @@ $(document).ready(function () {
                             </div>\
                             <div class="banner-0 col-9 text-white">\
                                 <div class="row">\
-                                    <div class="banner-1 col-8 align-self-end">\
+                                    <div class="banner-1 col-9 align-self-end">\
                                         <div style="font-weight: 900;" class="fs-2">'+ msg[i].WorkName + '</div>\
                                         <p><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
                                     </div>\
-                                    <div class="banner-2 col-4">\
-                                    <a href="../index.html"><img src="../img/about/banner/title.png" alt=""></a>\
+                                    <div class="banner-2 col-3 row justify-content-end px-0">\
                                     </div>\
                                 </div>\
                             </div> \
@@ -174,6 +173,7 @@ $(document).ready(function () {
                             <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><img class="img-fluid" src="' + msg[i].workimg[j].img + '" alt=""></a>\
                                 <div class="sec02-p-m p-1 mt-1 text-center">\
                                 <p>'+ msg[i].workimg[j].text + '</p>\
+                                <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><div class="sec03-img-m1"><img class="play1"  src="../img/arrow.png" alt=""></div></a>\
                                 </div>\
                             </div>';
 
@@ -194,10 +194,9 @@ $(document).ready(function () {
                                 <div class="secimg col-lg-4 p-0">\
                                 <a target="_blank" href="'+ msg[i].workVideo[j].videoSrc + '"><img class="img-fluid" src="' + msg[i].workVideo[j].video + '" alt=""></a>\
                                     <div class="sec03-p-m p-1 mt-1 text-center">\
-                                    <p>'+ msg[i].workVideo[j].videotext + '</p>\
+                                    <p class="mb-1">'+ msg[i].workVideo[j].videotext + '</p>\
                                     <a target="_blank" href="'+ msg[i].workVideo[j].videoSrc + '"><div class="sec03-img-m1"><img class="play1"  src="../img/play.png" alt=""></div></a>\
                                     </div>\
-                                    <a target="_blank" href="'+ msg[i].workVideo[j].videoSrc + '"><div class="sec03-img-m"><img class="play"  src="../img/play.png" alt=""></div></a>\
                                 </div>';
                             }
                         }
@@ -217,6 +216,7 @@ $(document).ready(function () {
                                 <a target="_blank" href="'+ msg[i].workMethod[j].Methodsrc + '"><img class="img-fluid" src="' + msg[i].workMethod[j].Methodimg + '" alt=""></a>\
                                 <div class="sec04-p-m p-1 mt-1 text-center">\
                                     <p>'+ msg[i].workMethod[j].Methodtext + '</p>\
+                                    <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><div class="sec03-img-m1"><img class="play1"  src="../img/arrow.png" alt=""></div></a>\
                                     </div>\
                                 </div>';
                             }

about/index.html

@@ -75,7 +75,9 @@
         </div>
     </section>
     <section id="banner">
+        <a id="about-title" href="../index.html"><img  style="width:300px" src="../img/banner/bannertitle.png" alt=""></a>
         <div id="bannerdes-img" style="width: 100vw;">
+            <a href="../index.html"><img src="../img/about/banner/title.png" alt=""></a>
             <!-- <img class="banner-img" style="width: 100vw;" src="./img/banner/banner-m.png" alt=""> -->
         </div>
         <div id="banner-container" class="container-fluid px-0">

goto.js

@@ -80,11 +80,12 @@ function funcTest2() {
                 <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
                 </div>\
                 <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
-                    <div class="banner1-1" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
+                  <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ msg[arrIndex].id + '"><div class="banner1-1" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
                     <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
+                  </a>\
                 </div>\
                 <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
-                    <img class="img-fluid" src="'+ msg[arrIndex].Designerimg + '" alt="">\
+                <a href="./about/index.html?id='+ msg[arrIndex].id + '"><img class="img-fluid" src="'+ msg[arrIndex].Designerimg + '" alt=""></a>\
                 </div>\
             </div>';
 

index.html

@@ -81,6 +81,7 @@
 
         </section>
         <section id="banner">
+          
             <div id="bannerdes-img" style="width: 100vw;">
                 <!-- <img class="banner-img" style="width: 100vw;" src="./img/banner/banner-m.png" alt=""> -->
             </div>