html

src/views/home/home.vue

@@ -85,45 +85,93 @@
                 </div>
             </div>
         </div>
-        <div id="box">
-            <ul>
-                <li class="box_div" id="box_one" v-show='companyinfo.safety!=""'>
-                  <a href="#box_one">シートベル着用のお願い</a>
-                  <span></span>
-                  <div class="box_cont" v-html="companyinfo.safety"></div>
-                </li>
-                <li class="box_div" id="box_two" v-show='companyinfo.process!=""'>
-                  <a href="#box_two">出発までの流れ</a>
-                  <span></span>
-                  <div class="box_cont" v-html="companyinfo.process"></div>
-                </li>
-                <li class="box_div" id="box_three" v-show='companyinfo.cancel!=""'>
-                  <a href="#box_three">変更・キャンセル手数料</a>
-                  <span></span>
-                  <div class="box_cont" v-html="companyinfo.cancel"></div>
-                </li>
-                <li class="box_div" id="box_four" v-show='companyinfo.about!=""'>
-                  <a href="#box_four">ご利用案内</a>
-                  <span></span>
-                  <div class="box_cont" v-html="companyinfo.about"></div>
-                </li>
-                <li class="box_div" id="box_five" v-show='companyinfo.mark!=""'>
-                  <a href="#box_five">標識・約款</a>
-                  <span></span>
-                  <div class="box_cont" v-html="companyinfo.mark"></div>
-                </li>
-                <li class="box_div" id="box_six" v-show='companyinfo.privacy!=""'>
-                  <a href="#box_six">プライバシーポリシー</a>
-                  <span></span>
-                  <div class="box_cont" v-html="companyinfo.privacy"></div>
-                </li>
-                <li class="box_div" id="box_seven" v-show='companyinfo.agreement!=""'>
-                  <a href="#box_seven">親権者同意書</a>
-                  <span></span>
-                  <div class="box_cont" v-html="companyinfo.agreement"></div>
-                </li>
-            </ul>
+
+
+    <section id="block" v-show='companyinfo.safety!=""'>
+        <input type="checkbox">
+        <div class="case-block">
+            <span>シートベル着用のお願い</span>
+
+          <div class="site1">▼</div>
+          <div class="site1">▲</div>
+        </div>
+        <div class="detail">
+          <div v-html="companyinfo.safety"></div>
+        </div>
+  　</section>
+    <section id="block" v-show='companyinfo.process!=""'>
+        <input type="checkbox">
+        <div class="case-block">
+            <span>出発までの流れ</span>
+
+          <div class="site1">▼</div>
+          <div class="site1">▲</div>
+        </div>
+        <div class="detail">
+          <div v-html="companyinfo.process"></div>
+        </div>
+  　</section>
+    <section id="block" v-show='companyinfo.cancel!=""'>
+        <input type="checkbox">
+        <div class="case-block">
+            <span>変更・キャンセル手数料</span>
+
+          <div class="site1">▼</div>
+          <div class="site1">▲</div>
         </div>
+        <div class="detail">
+          <div v-html="companyinfo.cancel"></div>
+        </div>
+      </section>
+      <section id="block" v-show='companyinfo.about!=""'>
+          <input type="checkbox">
+          <div class="case-block">
+              <span>ご利用案内</span>
+
+            <div class="site1">▼</div>
+            <div class="site1">▲</div>
+          </div>
+          <div class="detail">
+            <div v-html="companyinfo.about"></div>
+          </div>
+      </section>
+      <section id="block" v-show='companyinfo.mark!=""'>
+        <input type="checkbox">
+        <div class="case-block">
+            <span>標識・約款</span>
+
+          <div class="site1">▼</div>
+          <div class="site1">▲</div>
+        </div>
+        <div class="detail">
+          <div v-html="companyinfo.mark"></div>
+        </div>
+      </section>
+      <section id="block" v-show='companyinfo.privacy!=""'>
+          <input type="checkbox">
+          <div class="case-block">
+              <span>プライバシーポリシー</span>
+
+            <div class="site1">▼</div>
+            <div class="site1">▲</div>
+          </div>
+          <div class="detail">
+            <div v-html="companyinfo.privacy"></div>
+          </div>
+      </section>
+      <section id="block" v-show='companyinfo.agreement!=""'>
+          <input type="checkbox">
+          <div class="case-block">
+              <span>親権者同意書</span>
+
+            <div class="site1">▼</div>
+            <div class="site1">▲</div>
+          </div>
+          <div class="detail">
+            <div v-html="companyinfo.agreement"></div>
+          </div>
+      </section>
+
         <van-overlay :show="loading" @click="loading = false">
             <div class="wrapper" @click.stop>
                 <div class="block">
@@ -757,69 +805,105 @@ export default {
 
 
 
-#box{
-    width: 100%;
-    box-sizing: border-box;
-	text-align:left;
-	overflow: hidden;
 
-	  }
+  .title-block {
+      height: 26px;
+      text-align: center;
+  }
 
-  #box a{
-    text-decoration: none;
-    display: block;
-    font-size: 0.13rem;
-    width: 100%;
-    padding: 10px 20px;
-    background: #eee;
-    border-top: 1px solid #fff;
-    border-bottom: 1px solid #fff;
-    color: #2c3e50;
-    font-weight:600;
-    box-sizing: border-box;
+  #block {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+      -ms-flex-flow: column nowrap;
+      flex-flow: column nowrap;
+      width: 100%;
+      margin: 0 ;
+      font-size: 14px;
+      color: #4C4C4C;
+      line-height: 28px;
+      padding: 0px 0;
+      position: relative;
+  }
 
+ #block > .detail {
+      max-height: 0px;
 
+      overflow: hidden;
+      text-align:left;
+      margin: 0 0.1rem;
   }
-  #box .box_div{
-    position: relative;
+
+  #block > .case-block {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      justify-content: left;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      width: 100%;
+      font-size: 0.13rem;
+      height: 64px;
+      margin: 0 auto 0;
+      background: #eee;
+      border-top: 1px solid #fff;
+      border-bottom: 1px solid #fff;
+      color: #2c3e50;
+      font-weight: 600;
+  }
+  #block > .case-block .site1{
+     position: absolute;
+     right:30px;
+     color: #999;
+     font-size: 0.09rem;
+
+  }
+  #block > .case-block  span{
+    padding-left:30px;
+  }
+
+
+  #block > .case-block div:nth-of-type(1) {
+      display: block;
   }
-  #box span{
-    position: absolute;
-    top: 13px;
-    right: 3px;
-    width: 0;
-    height: 0;
-    display: block;
-    border-top: 6px solid #ccc;
-    border-bottom: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-left: 6px solid transparent;
+
+  #block > .case-block div:nth-of-type(2) {
+      display: none;
   }
-  #box .box_cont{
-    height: 0px;
-    overflow: hidden;
-    font-size: 0.11rem;
-    color: #000;
-    line-height: 1.7;
-      border: 1px #eee solid;
+
+  #block > [type="checkbox"] {
+
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 64px;
+      margin: 0px auto 0;
+      z-index: 1000;
+      opacity: 0;
 
   }
-  #box .box_cont p{
-    padding:10px 20px 20px 20px;
 
+  #block > [type="checkbox"]:hover + .case-block {
+      background-color: #eee;
   }
 
-#box .box_div:target .box_cont{
-    height: auto;
-    max-height: calc(50vh);
-    overflow-y: scroll;
+ #block > [type="checkbox"]:checked + .case-block div:nth-of-type(1) {
+      display: none;
+  }
 
+  #block > [type="checkbox"]:checked + .case-block div:nth-of-type(2) {
+      display: block;
   }
-  #box .box_div:target span{
-    border-top: 6px solid transparent;
-    border-bottom: 6px solid #ccc;
-    border-right: 6px solid transparent;
-    border-left: 6px solid transparent;
 
+  #block > [type="checkbox"]:checked + .case-block + .detail {
+      max-height: inherit;
+      max-height: 250px;
+      overflow-y:scroll;
   }
+
 </style>

src/views/home/pages/productDetails/productDetails.vue

@@ -1242,5 +1242,11 @@ export default {
     background-image: linear-gradient(to right, #67be64, #fae1bf);
 }
 
-
+.van-button--normal {
+    padding: 0 25px;
+    font-size: 14px;
+    border-radius: 20px;
+    font-weight: 600;
+    border-radius: 25px;
+}
     </style>