提交 8145dad8 编写于 作者: hudan's avatar hudan

图标ui调整

上级 f8c9270a
<template>
<ion-row class="app-form-group" >
<ion-item-divider v-if="isShowCaption" :style="{minHeight:caption?'':'10px'}" @click="clickCollapse">
<ion-label>
<span :class="titleClass" class="group-title"><ion-icon class="group-title-icon" v-if="iconName" :name="iconName"></ion-icon>{{caption}}</span>
<span :class="titleClass" class="group-title">
<app-mob-icon class="group-title-icon" v-if="iconName" :name="iconName"></app-mob-icon>
{{caption}}</span>
</ion-label>
<ion-icon v-show="titleBarCloseMode !== 0" class="group-collapse" :name="collapseContant ? 'chevron-back-outline' : 'chevron-down-outline'"></ion-icon>
<app-mob-icon v-show="titleBarCloseMode !== 0" class="group-collapse" :name="collapseContant ? 'chevron-back-outline' : 'chevron-down-outline'"></app-mob-icon>
<div :class="{'actiongroup':true,'closemode':titleBarCloseMode !== 0}" v-show="isHaveUiActionGroup">
<div class="groupbox" v-for="item in uiActionGroup.details" :key="item.index" @click="doUIAction($event,item.name)">
<ion-icon :name="item.icon" v-show="item.isShowIcon && item.visabled"/>
<app-mob-icon :name="item.icon" v-show="item.isShowIcon && item.visabled"/>
<van-button plain type="info" v-show="item.isShowCaption && item.visabled">{{item.caption}}</van-button>
</div>
</div>
......
......@@ -6,7 +6,10 @@
<div class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated" :class="required?'app-form-item-label-required':'app-form-item-label-notRequired'" :style="{minWidth:labelWidth+'px'}" position="floating" v-if="isShowCaption && labelWidth > 0">{{isEmptyCaption ? '' : caption}}</div>
<div class="selectValue" @click="setHight">
<div class="select_text" v-if="slotValue && slotValue.activeItem && slotValue.activeItem.text">{{slotValue.activeItem.text}}</div>
<div class="select_icon" v-if="slotValue && slotValue.options && slotValue.options.length > 6" ><span v-show="!slotValue || !slotValue.activeItem || !slotValue.activeItem.text">全部</span><ion-icon v-if="!allDataStatus" name="chevron-down-outline"></ion-icon><ion-icon v-if="allDataStatus" name="chevron-up-outline"></ion-icon></div>
<div class="select_icon" v-if="slotValue && slotValue.options && slotValue.options.length > 6" ><span v-show="!slotValue || !slotValue.activeItem || !slotValue.activeItem.text">全部</span>
<app-mob-icon v-if="!allDataStatus" name="chevron-down-outline"></app-mob-icon>
<app-mob-icon v-if="allDataStatus" name="chevron-up-outline"></app-mob-icon>
</div>
</div>
</div>
<div class="app-form-item2_content" ><slot ref="slot_content"></slot></div>
......
<template>
<div class="app-list-default">
<div class="icon_box" :style="getstyle()"><ion-icon :name="geticon()" /></div>
<div class="icon_box" :style="getstyle()"><app-mob-icon :name="geticon()" /></div>
<div class="info_box" v-if=" dataItemNames.length > 0">
<template v-for="(i,index) in dataItemNames" >
<div v-if="index == 0" :key="index" class="title">{{item[i]}}</div>
......
<template>
<div class="app-mobile-actionsheet">
<div class="cancel-icon" v-if="curValue || curValue === 0"><ion-icon name="close-circle-outline" @click="clear"></ion-icon></div>
<div class="cancel-icon" v-if="curValue || curValue === 0"><app-mob-icon name="close-circle-outline" @onClick="clear"></app-mob-icon></div>
<div v-if="curValue== null || curValue==''" class="select-icon" @click="showSheet"></div>
<!-- <ion-input :value="action" readonly @ionFocus="showSheet"></ion-input> -->
<div @click="showSheet" class="text">{{action}}</div>
......
......@@ -5,8 +5,8 @@
<ion-input :disabled="disabled" :value="curValue" readonly @click="openModal"></ion-input>
</div>
<div class="icon">
<ion-icon name="search-outline" v-show="!curValue" @click="openModal"></ion-icon>
<ion-icon v-show="curValue" class="delete-value " name="close-circle-outline" @click.stop="onClear"></ion-icon>
<app-mob-icon name="search-outline" v-show="!curValue" @onClick="openModal"></app-mob-icon>
<app-mob-icon v-show="curValue" class="delete-value " name="close-circle-outline" @onClick="onClear"></app-mob-icon>
</div>
</div>
......
......@@ -4,7 +4,7 @@
<ion-toolbar v-show="titleStatus" class="ionoc-view-header">
<ion-buttons slot="start">
<ion-button @click="closeView">
<ion-icon name="chevron-back"></ion-icon>
<app-mob-icon name="chevron-back"></app-mob-icon>
{{$t('app.button.back')}}
</ion-button>
</ion-buttons>
......@@ -26,7 +26,7 @@
<template v-for="(item, index) in item.value">
<ion-item :key="index" @click="click_node(item)" class="list-item">
<ion-label>{{ item.label }}</ion-label>
<ion-icon class="tree-icon" slot="end" :name="geticon(item.status)" @click.stop="icon_click(item)"></ion-icon>
<app-mob-icon class="tree-icon" position="end" :name="geticon(item.status)" @onClick="icon_click(item)"></app-mob-icon>
</ion-item>
</template>
</ion-list>
......
<template>
<div class="ibiz-mob-group-select">
<ion-input class="ibz-input" :value="selectName" readonly></ion-input>
<ion-icon v-show="selects.length>0" class="delete-value " name="close-circle-outline" @click.stop="clearSelects"></ion-icon>
<ion-icon v-show="selects.length<1" class="open-picker" name="search-outline" @click.stop="openView"></ion-icon>
<app-mob-icon v-show="selects.length>0" class="delete-value " name="close-circle-outline" @onClick="clearSelects"></app-mob-icon>
<app-mob-icon v-show="selects.length<1" class="open-picker" name="search-outline" @onClick="openView"></app-mob-icon>
</div>
</template>
......
......@@ -13,8 +13,7 @@
<template v-for="item in items">
<template v-if="!item.hidden">
<ion-tab-button :tab="item.name" :key="item.id" :selected="item.id == activeId" @click="active(item)">
<ion-icon :name=" item.iconcls ? item.iconcls : 'home' ">
</ion-icon>
<app-mob-icon :name=" item.iconcls ? item.iconcls : 'home' "></app-mob-icon>
<ion-label v-if="item.appfunctag != 'settings'">{{$t(`app.menus.${menuName}.${item.name}`)}}</ion-label>
<ion-label v-else>{{item.text}}</ion-label>
<ion-badge color="danger" v-if="counterServide && counterServide.counterData && counterServide.counterData[item.counterid]"><ion-label>{{counterServide.counterData[item.counterid]}}</ion-label></ion-badge>
......
......@@ -10,17 +10,17 @@
<img :src="item.icon" />
</template>
<template v-else-if="item.iconcls != ''">
<ion-icon v-if="item.iconcls.indexOf('iconfont') === -1" :name="item.iconcls">
</ion-icon>
<app-mob-icon v-if="item.iconcls.indexOf('iconfont') === -1" :name="item.iconcls">
</app-mob-icon>
<svg v-else class="icon" aria-hidden="true">
<use :xlink:href="'#'+item.iconcls.substring(9)"></use>
</svg>
</template>
<template v-else>
<ion-icon name="home-outline"></ion-icon>
<app-mob-icon name="home-outline"></app-mob-icon>
</template>
<!-- badge_style是为了用户在设置了图片图标时计数器会出现样式错乱, -->
<ion-icon v-show="false" name="badge_style" />
<app-mob-icon v-show="false" name="badge_style" />
<ion-label >{{$t(`app.menus.${menuName}.${item.name}`)}}</ion-label>
<template v-if="counterServide">
<ion-badge color="danger" v-if="counterServide.counterData[item.counterid]">{{counterServide.counterData[item.counterid]}}</ion-badge>
......
......@@ -20,11 +20,11 @@
<!-- fontawesome:END -->
<!-- ionic 图标:BEGIN -->
<template v-else-if="item.iconcls != ''">
<ion-icon :name="item.iconcls"></ion-icon>
<app-mob-icon :name="item.iconcls"></app-mob-icon>
</template>
<!-- ionic 图标:BEGIN -->
<template v-else>
<ion-icon name="home-outline"></ion-icon>
<app-mob-icon name="home-outline"></app-mob-icon>
</template>
</span>
<ion-label>
......
......@@ -9,7 +9,7 @@
<template v-for="item in items" >
<template v-if="!item.hidden">
<div class="list" :key="item.index" @click="active(item)" :class="{'active':item.id == activeId}">
<ion-icon :name=" item.iconcls ? item.iconcls : 'home' "></ion-icon>
<app-mob-icon :name=" item.iconcls ? item.iconcls : 'home' "></app-mob-icon>
<div class="text">
<ion-label v-if="item.appfunctag != 'settings'">{{$t(`app.menus.${menuName}.${item.name}`)}}</ion-label>
<ion-label v-else>{{item.text}}</ion-label>
......
......@@ -3,11 +3,11 @@
<div class="app-quick-group">
<div :class="{'quick-group-tab':true,'app-seleted-item':isSelectedItem(item) || item.childSelected}" v-for="(item,index) in showItems" :key="index" @click="handleClick(item)">
<div :style="{color:item.color}">
<ion-icon v-if=" item.iconcls && !Object.is(item.iconcls, '')" :name="item.iconcls"></ion-icon>
<app-mob-icon v-if=" item.iconcls && !Object.is(item.iconcls, '')" :name="item.iconcls"></app-mob-icon>
<img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
<span v-if="item.selectChildLabel" class="app-quick-item-label">{{item.selectChildLabel}}</span>
<span v-else class="app-quick-item-label">{{item.label}}</span>
<ion-icon v-if="item.children" name="caret-down-outline" style="margin-left:4px"></ion-icon>
<app-mob-icon v-if="item.children" name="caret-down-outline" style="margin-left:4px"></app-mob-icon>
</div>
<ion-badge class="badge" v-if="isSelectedItem(item) && pageTotal !== 0 && !item.children">{{pageTotal}}</ion-badge>
<ion-badge class="badge" v-if="item.childSelected && pageTotal">{{pageTotal}}</ion-badge>
......@@ -16,12 +16,12 @@
<div ref="child-list" :class="{'child-list':true,'open':subItems.length > 0}">
<div :class="{'child':true,'selected':item.selected}" v-for="(item,index) in subItems" :key="index" @click="handleClick(item)">
<span>
<ion-icon v-if=" item.iconcls && !Object.is(item.iconcls, '')" :name="item.iconcls"></ion-icon>
<app-mob-icon v-if=" item.iconcls && !Object.is(item.iconcls, '')" :name="item.iconcls"></app-mob-icon>
<img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
<span>{{item.label}}</span>
</span>
<ion-badge class="badge" v-if="pageTotal !== 0 && item.selected">{{pageTotal}}</ion-badge>
<ion-icon size="small" v-if="item.selected" style="margin-left:auto;color:green" name="checkmark-outline"></ion-icon>
<app-mob-icon size="small" v-if="item.selected" style="margin-left:auto;color:green" name="checkmark-outline"></app-mob-icon>
</div>
</div>
<ion-backdrop style="height:100vh;z-index:-1" v-show="subItems.length > 0" visible="true" tappable="true" @ionBackdropTap="closeBackdrop"></ion-backdrop>
......
......@@ -24,7 +24,7 @@
<template v-for="(item, index) in readerData">
<ion-item :key="index" @click="click_node(item)">
<ion-label>{{ item.label }}<span class="node_length" v-if="item.children && item.children.length > 0"> ({{item.children.length}})</span></ion-label>
<ion-icon class="tree-icon" slot="end" :name="geticon(item.status)" @click.stop="icon_click(item)"></ion-icon>
<app-mob-icon class="tree-icon" position="end" :name="geticon(item.status)" @onClick="icon_click(item)"></app-mob-icon>
</ion-item>
</template>
</ion-list>
......
<template>
<div class="app-mob-check-list-search" @click="open">
<div class="cancel-icon" v-if="curValue"><ion-icon name="close-circle-outline" @click.stop="clear"></ion-icon></div>
<div class="cancel-icon" v-if="curValue"><app-mob-icon name="close-circle-outline" @onClick="clear"></app-mob-icon></div>
<div v-if="curValue== null || curValue==''" class="ion-select-icon"></div>
<div class="value_text">{{value_text}}</div>
<van-action-sheet get-container="#app" class="ibiz_sheet" v-model="show" @click-overlay="onOverlayClick" >
......
<template>
<div class="app-mobile-check-list">
<div class="cancel-icon" v-if="curValue"><ion-icon name="close-circle-outline" @click="clear"></ion-icon></div>
<div class="cancel-icon" v-if="curValue"><app-mob-icon name="close-circle-outline" @onClick="clear"></app-mob-icon></div>
<div v-if="curValue== null || curValue==''" class="ion-select-icon"></div>
<ion-select ref="checkList" @ionChange="change" multiple="true" @click="load" :ok-text="$t('app.button.confirm')" :cancel-text="$t('app.button.cancel')" @ionCancel="cancel">
<ion-select-option v-for="option of options" :key="option.value" :value="option.value">{{option.text}}
......
<template>
<div class="app-mobile-datetime-picker">
<ion-icon v-if="curValue" name="close-outline" @click="clear"></ion-icon>
<app-mob-icon v-if="curValue" name="close-outline" @onClick="clear"></app-mob-icon>
<ion-datetime
:max="max"
:min="min"
......
......@@ -3,7 +3,7 @@
<ion-item-group v-if="files.length > 0">
<ion-item v-for="file in files" :key="file.id">
<ion-label><a class="file" @click="onDownload(file)">{{file.name}}</a></ion-label>
<ion-icon name="close-outline" @click="onDelete(file, null)"></ion-icon>
<app-mob-icon name="close-outline" @onClick="onDelete(file, null)"></app-mob-icon>
</ion-item>
</ion-item-group>
<ion-row >
......@@ -19,7 +19,7 @@
<ion-icon slot="start" name="image-outline"></ion-icon>
{{$t('uploadtext')}}
</ion-button> -->
<ion-icon name="add-outline" style=" font-size: 20px;"></ion-icon>
<app-mob-icon name="add-outline" style="font-size: 20px;"></app-mob-icon>
</van-uploader>
</ion-row>
</div>
......
......@@ -8,8 +8,8 @@
</template>
</div>
</ion-input>
<ion-icon class="open-picker" v-if="!curValue.length > 0" name="search-outline" @click.stop="openView"></ion-icon>
<ion-icon v-else class="open-picker" name="close-circle-outline" @click.stop="onClear"></ion-icon>
<app-mob-icon class="open-picker" v-if="!curValue.length > 0" name="search-outline" @onClick="openView"></app-mob-icon>
<app-mob-icon v-else class="open-picker" name="close-circle-outline" @onClick="onClear"></app-mob-icon>
</div>
</template>
......
<template>
<div class="app-picker" >
<ion-input :disabled="disabled" class="ibz-input" :value="refvalue" readonly @click="openView"></ion-input>
<ion-icon v-show="refvalue" class="delete-value " name="close-circle-outline" @click="onClear"></ion-icon>
<ion-icon v-show="refvalue == '' || refvalue == null" class="open-picker" name="search-outline" @click.stop="openView"></ion-icon>
<app-mob-icon v-show="refvalue" class="delete-value " name="close-circle-outline" @onClick="onClear"></app-mob-icon>
<app-mob-icon v-show="refvalue == '' || refvalue == null" class="open-picker" name="search-outline" @onClick="openView"></app-mob-icon>
</div>
</template>
<script lang="ts">
......
<template>
<div class="app-mob-rich-text-editor" @click="open">
<div class="rich-text-editor-info" v-html="reValue"></div>
<ion-icon class="app-mob-rich-text-editor-icon" v-if="!reValue && !isInfoFormMode" name="options-outline" @click.stop="open"></ion-icon>
<app-mob-icon class="app-mob-rich-text-editor-icon" v-if="!reValue && !isInfoFormMode" name="options-outline" @onClick="open"></app-mob-icon>
</div>
</template>
<script lang = 'ts'>
......
<template>
<div class="app-mobile-select-drop-down">
<div class="cancel-icon" v-if="curvalue"><ion-icon name="close-circle-outline" @click.stop="onClear"></ion-icon></div>
<div class="cancel-icon" v-if="curvalue"><app-mob-icon name="close-circle-outline" @onClick="onClear"></app-mob-icon></div>
<div v-if="curvalue== null || curvalue==''" class="ion-select-icon"></div>
<div class="select_text" @click="openSelect" >{{curvalue}}</div>
<ion-select :selected-text="selectValue" :ref="name+'select'" v-show="false" :disabled="disabled " @ionChange="change" interface="action-sheet" :cancel-text="$t('app.button.cancel')" @ionCancel="cancel">
......
<template>
<div class="app-mobile-select" data-tap-disabled="true">
<div class="cancel-icon" v-if="curValue || curValue === 0"><ion-icon name="close-circle-outline" @click="clear"></ion-icon></div>
<div class="cancel-icon" v-if="curValue || curValue === 0"><app-mob-icon name="close-circle-outline" @onClick="clear"></app-mob-icon></div>
<div v-if="curValue== null || curValue==''" class="ion-select-icon"></div>
<ion-select :value="curValue" :disabled="disabled ? disabled : false" @ionChange="change" interface="action-sheet" @click="load" :cancel-text="$t('app.button.cancel')" @ionCancel="cancel">
<template v-if="codeListType == 'DYNAMIC'">
......
......@@ -20,7 +20,7 @@
<draggable v-model="selectedData" handle=".end" :animation="200" @end="dragEnd">
<div class="content" v-for="item in selectedData" :key="item.componentName">
<div class="start" @click="delteItem(item.id)">
<ion-icon name="remove-circle-outline"></ion-icon>
<app-mob-icon name="remove-circle-outline"></app-mob-icon>
</div>
<div class="drag-list-pic"><img :src="item.detailImage?item.detailImage:'assets/images/add-task-list-card.jpg'" alt=""></div>
<div class="drag-list-text">
......@@ -29,7 +29,7 @@
<div v-else>暂无描述</div>
</div>
<div class="end">
<ion-icon name="drag-point"></ion-icon>
<app-mob-icon name="drag-point"></app-mob-icon>
</div>
</div>
</draggable>
......@@ -40,7 +40,7 @@
<template v-for="item in selectData">
<div class="content" v-if="item.componentName" :key="item.componentName">
<div class="start" @click="addItem(item.id)">
<ion-icon name="add-circle-outline"></ion-icon>
<app-mob-icon name="add-circle-outline"></app-mob-icon>
</div>
<div class="drag-list-pic"><img :src="item.detailImage?item.detailImage:'assets/images/add-task-list-card.jpg'" alt=""></div>
<div class="drag-list-text">
......
......@@ -7,10 +7,10 @@
<ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
<div class="content-list-item-content">
<div class="content-list-item-content-text">{{item.showtext}}</div>
<ion-icon
<app-mob-icon
v-if="item.name !== 'theme' && item.name !== 'accountInformation'"
name="chevron-forward-outline"
></ion-icon>
></app-mob-icon>
<app-mob-select-theme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-theme>
<div
v-if="item.name == 'accountInformation'"
......@@ -30,10 +30,10 @@
<ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
<div class="content-list-item-content">
<div class="content-list-item-content-text">{{item.showtext}}</div>
<ion-icon
<app-mob-icon
v-if="item.name !== 'theme' && item.name !== 'accountInformation'"
name="chevron-forward-outline"
></ion-icon>
></app-mob-icon>
<app-mob-select-theme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-theme>
<div
v-if="item.name == 'accountInformation'"
......@@ -53,10 +53,10 @@
<ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
<div class="content-list-item-content">
<div class="content-list-item-content-text">{{item.showtext}}</div>
<ion-icon
<app-mob-icon
v-if="item.name !== 'theme' && item.name !== 'accountInformation'"
name="chevron-forward-outline"
></ion-icon>
></app-mob-icon>
<app-mob-select-theme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-theme>
<div
v-if="item.name == 'accountInformation'"
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册