修改

src/components/trip/style1.vue

@@ -47,18 +47,27 @@
     font-size: 55px;
     font-weight: bold;
     color: #000;
-    -webkit-writing-mode: vertical-lr;
-    writing-mode: vertical-lr;
+    /* -webkit-writing-mode: vertical-lr;
+    writing-mode: vertical-lr; */
     height: 100%;
+    width:82px;
+    display:inline-block;
+    word-wrap: break-word;
+    line-height: 55px;
   }
 
   .Style_main_Top .sub-title {
     font-size: 24px;
     font-weight: lighter;
-    padding-top: 74px;
-    -webkit-writing-mode: vertical-lr;
-    writing-mode: vertical-lr;
+    /* padding-top: 74px; */
+    /* -webkit-writing-mode: vertical-lr;
+    writing-mode: vertical-lr; */
     height: 100%;
+    display: inline-block;
+    width:36px;
+    word-wrap: break-word;
+    position: relative;
+    top:-30px;
   }
 
   @media only screen and (max-width: 768px) {
@@ -69,9 +78,12 @@
     }
     .Style_main_Top .main-title{
       font-size:30px;
+      width:36px;
+      line-height: 30px;
     }
     .Style_main_Top .sub-title{
       font-size:15px;
+      width:22px;
     }
     .detOneModel label {
         width: 100%;
@@ -87,7 +99,7 @@
     </div>
     <div class="detOneModel">
       <label>
-        <b class="main-title">{{dataList.countryName}}</b>
+        <span class="main-title">{{dataList.countryName}}</span>
         <span class="sub-title">{{dataList.placeName}}</span>
       </label>
     </div>

src/pages/details.vue

@@ -86,16 +86,17 @@
   }
   .text-h6Detail {
     text-align: center;
-    padding: 0 20px;
     font-size: 18px;
     color: #333;
     font-weight: 700;
     position: relative;
+    width:100%;
+    height:50px;
   }
   .text-h6Detail i {
     position: absolute;
     right:20px;
-    top:20px;
+    top:10px;
     cursor: pointer;
     font-size:23px;
   }