表单列表样式

h5app/src/App.vue

@@ -266,5 +266,89 @@ ion-grid {
   width: 70%;
 }
 
+.bw-vue-form{
+  .form-title{
+    padding: 10px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .form-input{
+    padding: 10px;
+
+    ion-input{
+      border-bottom: 1px solid #f1f5f7;
+      color: #8c8f93;
+      --padding-start: 0px;
+    }
+  }
+
+  .form-select{
+    padding: 10px;
+
+    ion-select{
+      border-bottom: 1px solid #f1f5f7;
+      color: #8c8f93;
+      --padding-start: 0px;
+    }
+
+    ion-select::part(icon){
+      display: none;
+    }
+
+    ion-select::after{
+      content: "选择";
+      color: #02a6f1;
+    }
+  }
+
+  .form-detail{
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    vertical-align: middle;
+    color: #8c8f93;
+
+    ion-label{
+      min-width: 80px;
+      padding: 0 5px 0 0;
+    }
+  }
+}
+
+.bw-vue-list{
+  .list-title{
+    padding: 10px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .list-content{
+
+    ion-item{
+      --inner-border-width: 0;
+      --inner-padding-end:0px;
+      margin: 0 10px;
+      border-bottom: 1px solid #f1f5f7;
+      border-radius: 0px;
+
+      ion-label{
+        .multi-title{
+          display: flex;
+          justify-content: space-between;
+        }
+        p{
+          font-size: 12px;
+          color: #8c8f93;
+        }
+      }
+    }
+
+    ion-item::part(native){
+      padding: 0px;
+    }
+  }
+}
+
 
 </style>

h5app/src/router/index.ts

@@ -111,7 +111,12 @@ const routes: Array<RouteRecordRaw> = [
             {
                 path: 'tabUser/updatePassword',
                 component: () => import('@/views/pages/user/updatePassword.vue')
+            },
+            {
+                path: 'tabMain/demo/edit',
+                component: () => import('@/views/pages/demo/edit.vue')
             }
+
         ]
     },
     {

h5app/src/views/pages/demo/edit.vue

@@ -0,0 +1,107 @@
+<template>
+   <ion-page class="list-page">
+     <ion-header>
+       <ion-toolbar>
+         <ion-title>表单页面</ion-title>
+       </ion-toolbar>
+     </ion-header>
+     <ion-content>
+       <div class="bw-vue-form">
+         <div class="form-title">船舶信息编辑页面</div>
+         <div class="form-input">
+           <ion-label>船舶名称</ion-label>
+           <ion-input placeholder="请输入船舶名称"></ion-input>
+         </div>
+         <div class="form-input">
+           <ion-label>证件号码</ion-label>
+           <ion-input placeholder="请输入证件号码"></ion-input>
+         </div>
+         <div class="form-select">
+           <ion-label>船舶主体</ion-label>
+           <ion-select interface="action-sheet" placeholder="请选择船舶主体">
+             <ion-select-option value="apples">Apples</ion-select-option>
+             <ion-select-option value="oranges">Oranges</ion-select-option>
+             <ion-select-option value="bananas">Bananas</ion-select-option>
+           </ion-select>
+         </div>
+       </div>
+
+       <div class="bw-vue-form">
+         <div class="form-title">个人基本信息详情页面</div>
+         <div class="form-detail">
+           <ion-label>社保号码</ion-label>
+           <ion-text>123456789</ion-text>
+         </div>
+         <div class="form-detail">
+           <ion-label>姓名</ion-label>
+           <ion-text>张xx</ion-text>
+         </div>
+         <div class="form-detail">
+           <ion-label>性别</ion-label>
+           <ion-text>男</ion-text>
+         </div>
+         <div class="form-detail">
+           <ion-label>民族</ion-label>
+           <ion-text>汉族</ion-text>
+         </div>
+         <div class="form-detail">
+           <ion-label>联系电话</ion-label>
+           <ion-text>123456789</ion-text>
+         </div>
+         <div class="form-detail">
+           <ion-label>简单介绍</ion-label>
+           <ion-text>上海张江综合性国家科学中心与合肥综合性国家科学中心携手实施“两心同创”，探路科技创新共同体建设。“合肥光源”和“上海光源”的合作，正是这一探索的生动实践</ion-text>
+         </div>
+       </div>
+
+       <div class="bw-vue-list">
+         <div class="list-title">列表页面</div>
+         <div class="list-content">
+           <ion-list>
+             <ion-item>
+               <ion-label>
+                 <div class="multi-title">
+                   <h2>广州市中医院同德门诊部</h2>
+                   <p>7.58km</p>
+                 </div>
+                 <p>广州市白云区27号</p>
+               </ion-label>
+             </ion-item>
+             <ion-item>
+               <ion-label>
+                 <h2>H3 Heading</h2>
+                 <p>Paragraph</p>
+               </ion-label>
+             </ion-item>
+             <ion-item>
+               <ion-label>
+                 <h2>H3 Heading</h2>
+                 <p>Paragraph</p>
+               </ion-label>
+             </ion-item>
+             <ion-item>
+               <ion-label>
+                 <h2>H3 Heading</h2>
+                 <p>Paragraph</p>
+               </ion-label>
+             </ion-item>
+           </ion-list>
+         </div>
+       </div>
+     </ion-content>
+
+   </ion-page>
+</template>
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+  name:"demo_edit",
+  setup(){
+    return {}
+  }
+});
+</script>
+<style lang="less">
+
+</style>

h5app/src/views/sapp/tabMain.vue

@@ -40,6 +40,12 @@
         </div>
         <div class="tool-title">驿站地图</div>
        </a>
+        <a class="tool-item box-line"  @click="router.push('/tabs/tabMain/demo/edit')">
+          <div class="tool-img">
+            <img src="@/assets/icon/map.png">
+          </div>
+          <div class="tool-title">表单样式</div>
+        </a>
       </div>
       <div class="panel">
         <div class="panel_title">