添加风格改变组件

src/app-register.ts

@@ -115,5 +115,7 @@ export const AppComponents = {
         v.component('app-quick-group-tab',() => import('@/components/app-quick-group-tab/app-quick-group-tab.vue'));
         // setting组件
         v.component('app-setting',() => import('@/components/app-setting/app-setting.vue'));
+        // 风格切换组件
+        v.component('app-mob-select-changeStyle',() => import('@/components/app-mob-select-changeStyle/app-mob-select-changeStyle.vue'));
     },
 };
\ No newline at end of file

src/components/app-mob-select-changeStyle/app-mob-select-changeStyle.less

+.app-mob-select-changeStyle{
+  height: 100%;
+  background-color: #F5F6FA;
+  ion-list{
+    margin: 20px 10px;
+    ion-list-header{
+      line-height: 16px;
+      background-color: #F5F6FA;
+      ion-label{
+        font-size: 16px;
+      }
+    }
+    ion-item{
+      ion-radio{
+        --color-checked:#00CBFC;
+      }
+    }
+  }
+  .change-style-btnbox{
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    .change-style-btn{
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
\ No newline at end of file

src/components/app-mob-select-changeStyle/app-mob-select-changeStyle.vue

+<template>
+    <div  class="app-mob-select-changeStyle" >
+      <ion-list>
+        <ion-radio-group :value="activeAlign">
+          <ion-list-header>
+            <ion-label>文本对齐方式</ion-label>
+          </ion-list-header>
+          <ion-item v-for="item in alignItems" :key="item.index" @click="changeTextAlign">
+            <ion-label>{{item.text}}</ion-label>
+            <ion-radio slot="start" :value="item.value"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+
+      <ion-list>
+        <ion-radio-group :value="activeNavi">
+          <ion-list-header>
+            <ion-label>导航栏风格切换</ion-label>
+          </ion-list-header>
+          <ion-item  v-for="item in naviItems" :key="item.index" @click="changeNaviStyle">
+            <ion-label>{{item.text}}</ion-label>
+            <ion-radio slot="start" :value="item.value"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+
+      <div class="change-style-btnbox">
+        <ion-button class="change-style-btn success" @click="save" expand="full">确定</ion-button> 
+      </div>
+    </div>
+   
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Provide, Emit, Watch, } from "vue-property-decorator";
+
+@Component({
+    components: {},
+})
+export default class AppSelect extends Vue {
+
+    /**
+     * 当前文本对齐方式选中值
+     * @memberof AppMobSelectChangeStyle
+     */
+    public activeAlign:any = '';
+
+    /**
+     * 当前导航栏选中值
+     * @memberof AppMobSelectChangeStyle
+     */
+    public activeNavi:any = '';
+
+    /**
+     * 文本对齐方式
+     * @memberof AppMobSelectChangeStyle
+     */
+    public alignItems:Array<any> = [
+        {text:'左对齐',value:'app-text-align-left'},
+        {text:'右对齐',value:'app-text-align-right'},
+      ]
+
+    /**
+     * 导航栏样式
+     * @memberof AppMobSelectChangeStyle
+     */
+    public naviItems:Array<any> = [
+        {text:'经典',value:'app-navi-class'},
+        {text:'创新',value:'app-navi-new'}
+      ]
+
+    /**
+     * 生命周期mounted
+     * @memberof AppMobSelectChangeStyle
+     */
+    public mounted(){
+        this.activeAlign = this.getActiveAlign();
+        this.activeNavi = this.getActiveNavi();
+    }
+
+    /**
+     * 获取文本对齐方式
+     * @memberof AppMobSelectChangeStyle
+     */
+    public getActiveAlign(){
+        if (this.$store.state.selectTextAlign) {
+            return this.$store.state.selectTextAlign;
+        } else if (localStorage.getItem('align-class')) {
+            return localStorage.getItem('align-class');
+        } else {
+            return 'app-text-align-right';
+        }
+    }
+
+    /**
+     * 获取导航栏样式
+     * @memberof AppMobSelectChangeStyle
+     */
+    public getActiveNavi(){
+        if (this.$store.state.selectNaviStyle) {
+            return this.$store.state.selectNaviStyle;
+        } else if (localStorage.getItem('navigation-class')) {
+            return localStorage.getItem('navigation-class');
+        } else {
+            return 'app-navi-new';
+        }
+    }
+
+    /**
+     * 点击改变文本对齐方式
+     * @memberof AppMobSelectChangeStyle
+     */
+    public changeTextAlign($event:any){
+      this.textAlignChange($event.target.value);
+    }
+
+    /**
+     * 文本对齐方式变化
+     * @memberof AppMobSelectChangeStyle
+     */
+    public textAlignChange(val:any){
+        if (!Object.is(this.activeAlign, val)) {
+            this.activeAlign = val;
+            localStorage.setItem('align-class', val);
+            this.$store.commit('setTextAlignStyle', val);
+        }
+    }
+
+    /**
+     * 点击改变导航栏样式
+     * @memberof AppMobSelectChangeStyle
+     */
+    public changeNaviStyle($event:any){
+      this.naviStyleChange($event.target.value)
+    }
+
+    /**
+     * 导航栏样式变化
+     * @memberof AppMobSelectChangeStyle
+     */
+    public naviStyleChange(val:any){
+        if (!Object.is(this.activeNavi, val)) {
+            this.activeNavi = val;
+            localStorage.setItem('navigation-class', val);
+            this.$store.commit('setNavigationStyle', val);
+        }
+    }
+
+    /**
+     * 退出模态框
+     * @memberof AppMobSelectChangeStyle
+     */
+    public save(){
+      this.$emit('close');
+    }
+
+}
+</script>
+
+<style lang="less">
+@import './app-mob-select-changeStyle.less';
+</style>
\ No newline at end of file

src/components/app-setting/app-setting.vue

@@ -30,7 +30,7 @@
         <ion-item v-if="settingConfig.layoutStyle">
           <div class="content-list-item-content">
             <div class="content-list-item-content-text">风格</div>
-            <ion-icon name="chevron-forward-outline"></ion-icon>
+            <ion-button color="primary" class="active-text-align-style" @click="openModal">风格调整</ion-button>
           </div>
         </ion-item>
       </ion-list>
@@ -207,6 +207,29 @@ export default class AppSetting extends Vue {
       }
     }
 
+    /**
+     * 打开模态框
+     *
+     * @type {string}
+     * @memberof AppRichTextEditor
+     */
+    public openModal(){
+      this.openPopupModal({ viewname: 'app-mob-select-changeStyle', title: 'app-mob-select-changeStyle'},{},{});
+    }
+
+    /**
+     * 模态打开
+     *
+     * @type {string}
+     * @memberof AppRichTextEditor
+     */
+    private async openPopupModal(view: any, context: any, param: any): Promise<any> {
+        const result: any = await this.$appmodal.openModal(view, context, param);
+        if (result || Object.is(result.ret, 'OK')) {
+            this.$emit("change", result.datas[0].backEnd);
+        }
+    }
+
 }
 </script>
 <style lang="less">

src/store/mutations.ts

@@ -262,3 +262,23 @@ export const setNoticeStatus = (state: any, status: boolean) => {
 export const setSelectStatus = (state: any, status: boolean) => {
   state.selectStatus = status;
 }
+
+/**
+ * 修改文本对齐方式
+ * 
+ * @param state 
+ * @param val 
+ */
+export const setTextAlignStyle = (state: any, val: any) => {
+  state.selectTextAlign = val;
+}
+
+/**
+ * 修改导航栏风格
+ * 
+ * @param state 
+ * @param val 
+ */
+export const setNavigationStyle = (state: any, val: any) => {
+  state.selectNaviStyle = val;
+}
\ No newline at end of file

src/store/state.ts

@@ -15,4 +15,6 @@ export const rootstate: any = {
     zIndex: 300,
     noticeStatus:true,
     selectStatus:true,
+    selectTextAlign:'',
+    selectNaviStyle:'',
 }
\ No newline at end of file

src/styles/default.less

 @import "../../node_modules/font-awesome/less/font-awesome.less";
-@import "../theme/blue.theme.less";
-@import "../theme/dark-blue.theme.less";
-@import "../theme/class-black.less";
-@import "../theme/light-green.less";
-@import "../theme/peach-pink.less";
-@import "../theme/star-purple.less";
-@import "../theme/summer-yellow.less";
-@import "../theme/vital-red.less";
+@import "./theme/blue.theme.less";
+@import "./theme/dark-blue.theme.less";
+@import "./theme/class-black.less";
+@import "./theme/light-green.less";
+@import "./theme/peach-pink.less";
+@import "./theme/star-purple.less";
+@import "./theme/summer-yellow.less";
+@import "./theme/vital-red.less";
 @import "./theme.less";
-@import "./layout.less";
 @import "./sysStyles.less";
+@import "./layout/layout.less";
+@import "./layout/align/align-left.less";
+@import "./layout/align/align-right.less";
+@import "./layout/navigation/navi-class.less";
+@import "./layout/navigation/navi-new.less";
+
 .ion-page.view-container {
   height: 100%;
   display: flex;
@@ -141,29 +146,29 @@ button.alert-button.ion-focusable.ion-activatable.secondary.sc-ion-alert-ios {
 // }
 
 //分页tab样式 
-ion-segment{
-  height: 40px;
-  width: 100%;
-  --background: #f4f3f8;
-  border-radius: 0;    
-  ion-segment-button{
-    box-sizing: border-box;
-    line-height: 40px;
-    position:relative;
-    --border-radius: 0;  
-    --indicator-box-shadow:#7eb4e6;
-    --color-checked:#7eb4e6;
-    --indicator-color: #f4f3f8;
-    --border-style:none;
-    margin-top: 0;
-    margin-bottom: 2px;
-    --transition:none;
-  }
-  .segment-button-checked{
-    border-bottom: 2px solid #7eb4e6;
-    margin: 0;
-  }
-}
+// ion-segment{
+//   height: 40px;
+//   width: 100%;
+//   --background: #f4f3f8;
+//   border-radius: 0;    
+//   ion-segment-button{
+//     box-sizing: border-box;
+//     line-height: 40px;
+//     position:relative;
+//     --border-radius: 0;  
+//     --indicator-box-shadow:#7eb4e6;
+//     --color-checked:#7eb4e6;
+//     --indicator-color: #f4f3f8;
+//     --border-style:none;
+//     margin-top: 0;
+//     margin-bottom: 2px;
+//     --transition:none;
+//   }
+//   .segment-button-checked{
+//     border-bottom: 2px solid #7eb4e6;
+//     margin: 0;
+//   }
+// }
 
 ion-toolbar{
   --padding-bottom: 0;

src/styles/layout/align/align-left.less

+.app-text-align-left{
+  @default-form-text-align: left;
+  .layout(@default-form-text-align);
+}
\ No newline at end of file

src/styles/layout/align/align-right.less

+.app-text-align-right{
+  @default-form-text-align: right;
+  .layout(@default-form-text-align);
+}
\ No newline at end of file

src/styles/layout/layout.less

+// 布局公共函数
+.layout(@form-text-align) {
+  .app-mobile-select ion-select::part(text) {
+    text-align: @form-text-align;
+  }
+  .app-mobile-check-list ion-select::part(text) {
+    text-align: @form-text-align;
+  }
+  .app-mobile-datetime-picker {
+    ion-datetime {
+      text-align: @form-text-align;
+    }
+  }
+  .app-picker .ibz-input {
+    text-align: @form-text-align;
+  }
+  .left {
+    .app-form-item-input {
+      text-align: @form-text-align;
+    }
+  }
+  .app-mob-mpicker > ion-input {
+    text-align: @form-text-align;
+  }
+  ion-textarea {
+    text-align: @form-text-align;
+  }
+  .app-mobile-select-drop-down{
+    ion-select{
+      text-align: @form-text-align;
+    }
+    .select_text{
+      text-align: @form-text-align;
+    }
+  }
+  .app-mob-input{
+    text-align: @form-text-align;
+  }
+  .app-mob-rich-text-editor{
+    text-align: @form-text-align;
+  }
+  .app-mobile-select{
+    ion-select {
+      text-align: @form-text-align;
+    }
+  }
+  .app-mobile-check-list{
+    ion-select {
+      text-align: @form-text-align;
+    }
+  }
+}

src/styles/layout/navigation/navi-class.less

+.app-navi-class{
+  ion-segment{
+    width: 100%;
+    ion-segment-button{
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file

src/styles/layout/navigation/navi-new.less

+.app-navi-new{
+  ion-segment{
+    height: 40px;
+    width: 100%;
+    --background: #f4f3f8;
+    border-radius: 0;    
+    ion-segment-button{
+      box-sizing: border-box;
+      line-height: 40px;
+      position:relative;
+      --border-radius: 0;  
+      --indicator-box-shadow:#7eb4e6;
+      --color-checked:#7eb4e6;
+      --indicator-color: #f4f3f8;
+      --border-style:none;
+      margin-top: 0;
+      margin-bottom: 2px;
+      --transition:none;
+    }
+    .segment-button-checked{
+      border-bottom: 2px solid #7eb4e6;
+      margin: 0;
+    }
+  }
+}
\ No newline at end of file

src/styles/sysStyles.less

+//系统代码表样式
+        .text-blue-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #158af1;
+    border-color: #158af1;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #158af1;
+    border-radius: 10px;
+}
+        .text-red-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #d50000;
+    border-color: #d50000;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #d50000;
+    border-radius: 10px;
+}
+        .text-pink-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #ff9800;
+    border-color: #ff9800;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #ff9800;
+    border-radius: 10px;
+}
+        .text-green-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #009688;
+    border-color: #009688;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #009688;
+    border-radius: 10px;
+}
+        .text-red-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #d50000;
+    border-color: #d50000;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #d50000;
+    border-radius: 10px;
+}
+        .text-pink-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #ff9800;
+    border-color: #ff9800;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #ff9800;
+    border-radius: 10px;
+}
+        .text-blue-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #158af1;
+    border-color: #158af1;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #158af1;
+    border-radius: 10px;
+}
+        .text-green-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #009688;
+    border-color: #009688;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #009688;
+    border-radius: 10px;
+}
+        .text-red-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #d50000;
+    border-color: #d50000;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #d50000;
+    border-radius: 10px;
+}
+        .text-pink-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #ff9800;
+    border-color: #ff9800;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #ff9800;
+    border-radius: 10px;
+}
+        .text-blue-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #158af1;
+    border-color: #158af1;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #158af1;
+    border-radius: 10px;
+}
+        .text-green-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #009688;
+    border-color: #009688;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #009688;
+    border-radius: 10px;
+}
+        .text-blue-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #158af1;
+    border-color: #158af1;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #158af1;
+    border-radius: 10px;
+}
+        .text-pink-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #ff9800;
+    border-color: #ff9800;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #ff9800;
+    border-radius: 10px;
+}
+        .text-blue-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #158af1;
+    border-color: #158af1;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #158af1;
+    border-radius: 10px;
+}
+        .text-green-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #009688;
+    border-color: #009688;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #009688;
+    border-radius: 10px;
+}
+        .text-red-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #d50000;
+    border-color: #d50000;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #d50000;
+    border-radius: 10px;
+}
+        .text-pink-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #ff9800;
+    border-color: #ff9800;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #ff9800;
+    border-radius: 10px;
+}
+        .text-blue-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #158af1;
+    border-color: #158af1;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #158af1;
+    border-radius: 10px;
+}
+        .text-green-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #009688;
+    border-color: #009688;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #009688;
+    border-radius: 10px;
+}
+        .text-red-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #d50000;
+    border-color: #d50000;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #d50000;
+    border-radius: 10px;
+}
+        .text-pink-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #ff9800;
+    border-color: #ff9800;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #ff9800;
+    border-radius: 10px;
+}
+        .text-blue-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #158af1;
+    border-color: #158af1;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #158af1;
+    border-radius: 10px;
+}
+        .text-green-border-color {
+    display: inline-block;
+    min-width: 20px;
+    max-width: 67px;
+    height: 20px;
+    padding: 0 4px;
+    overflow: hidden;
+    line-height: 17px;
+    color: #009688;
+    border-color: #009688;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 2px solid #009688;
+    border-radius: 10px;
+}