提交 f8f0b9b8 编写于 作者: RedPig97's avatar RedPig97

update: less组件替换scss

上级 fcc4ae31
......@@ -28,6 +28,6 @@ export default class Error404 extends Vue {
}
</script>
<style lang='less'>
@import './404.less';
<style lang='scss'>
@import './404.scss';
</style>
\ No newline at end of file
......@@ -28,6 +28,6 @@ export default class Error404 extends Vue {
}
</script>
<style lang='less'>
@import './500.less';
<style lang='scss'>
@import './500.scss';
</style>
\ No newline at end of file
......@@ -163,6 +163,6 @@ export default class ActionTimeline extends Vue {
}
</script>
<style lang='less'>
@import './action-timeline.less';
<style lang='scss'>
@import './action-timeline.scss';
</style>
\ No newline at end of file
......@@ -150,6 +150,6 @@ export default class AppActionBar extends Vue {
}
</script>
<style lang='less'>
@import "./app-actionbar.less";
<style lang='scss'>
@import "./app-actionbar.scss";
</style>
\ No newline at end of file
......@@ -93,6 +93,6 @@ export default class AppAddressSelection extends Vue {
}
</script>
<style lang='less'>
@import './app-address-selection.less';
<style lang='scss'>
@import './app-address-selection.scss';
</style>
\ No newline at end of file
......@@ -112,7 +112,7 @@ export default class AppAlertGroup extends Vue {
}
</script>
<style lang="less">
<style lang="scss">
.view-body-messages {
margin-bottom: 6px;
}
......
......@@ -230,6 +230,6 @@ export default class AppAlert extends Vue {
}
</script>
<style lang="less">
@import './app-alert.less';
<style lang="scss">
@import './app-alert.scss';
</style>
\ No newline at end of file
......@@ -319,6 +319,6 @@ export default class AppAutocomplete extends Vue {
}
</script>
<style lang='less'>
@import './app-autocomplete.less';
<style lang='scss'>
@import './app-autocomplete.scss';
</style>
\ No newline at end of file
......@@ -216,6 +216,6 @@ export default class Breadcrumb extends Vue {
}
</script>
<style lang='less'>
@import "./app-breadcrumb.less";
<style lang='scss'>
@import "./app-breadcrumb.scss";
</style>
\ No newline at end of file
......@@ -55,6 +55,6 @@ export default class AppBuild extends Vue {
}
</script>
<style lang="less">
@import './app-build.less';
<style lang="scss">
@import './app-build.scss';
</style>
\ No newline at end of file
.app-calendar-itemlayoutpanel{
display: flex;
.item-icon{
width: 40px;
height: 40px;
margin-right: 10px;
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.item-text{
.title{
font-size: 18px;
font-weight: bold;
}
.srfdescription{
margin-top: 14px;
margin-bottom: 14px;
}
.date{
.start{
margin:0 6px;
}
.end{
margin:0 6px;
}
}
}
}
<template>
<div class="app-calendar-itemlayoutpanel">
<div class="item-icon">
</div>
<div class="item-text">
<div class="title">{{inputData.title}}</div>
<div class="srfdescription">{{inputData.srfdescription}}</div>
<div class="date">
{{ $t('userCustom.AppCalendarItemlayoutpanel.from') }}
<span class="start">{{inputData.start}}</span>
{{$t('userCustom.AppCalendarItemlayoutpanel.to')}}
<span class="end">{{inputData.end}}</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject,Subscription } from 'rxjs';
@Component({
})
export default class AppCalendarItemlayoutpanel extends Vue {
/**
* 面板数据对象
*
* @type {*}
* @memberof AppCalendarItemlayoutpanel
*/
@Prop() public inputData?: any;
}
</script>
<style lang="scss">
@import './app-calendar-itemlayoutpanel.scss';
</style>
\ No newline at end of file
......@@ -284,6 +284,6 @@ export default class AppCheckBox extends Vue {
}
</script>
<style lang='less'>
@import './app-checkbox-list.less';
<style lang='scss'>
@import './app-checkbox-list.scss';
</style>
\ No newline at end of file
......@@ -50,6 +50,6 @@ export default class AppCheckbox extends Vue {
}
</script>
<style lang='less'>
@import "./app-checkbox.less";
<style lang='scss'>
@import "./app-checkbox.scss";
</style>
\ No newline at end of file
......@@ -179,6 +179,6 @@ export default class AppColorPicker extends Vue {
}
</script>
<style lang="less">
@import './app-color-picker.less';
<style lang="scss">
@import './app-color-picker.scss';
</style>
......@@ -152,7 +152,7 @@ export default class AppColorSpan extends Vue {
}
</script>
<style lang="less">
<style lang="scss">
.text-color{
padding: 2px 8px;
margin: 6px 6px 6px 0px;
......
......@@ -53,6 +53,6 @@ export default class AppColumnFormat extends Vue {
}
</script>
<style lang='less'>
@import "./app-column-format.less";
<style lang='scss'>
@import "./app-column-format.scss";
</style>
\ No newline at end of file
......@@ -314,6 +314,6 @@ export default class AppColumnLink extends Vue {
}
</script>
<style lang='less'>
@import './app-column-link.less';
<style lang='scss'>
@import './app-column-link.scss';
</style>
\ No newline at end of file
......@@ -148,6 +148,6 @@ export default class AppColumnRender extends Vue {
}
</script>
<style lang='less'>
@import "./app-column-render.less";
<style lang='scss'>
@import "./app-column-render.scss";
</style>
\ No newline at end of file
......@@ -457,6 +457,6 @@ export default class AppDashboardDesign extends Vue {
}
</script>
<style lang="less">
@import "./app-dashboard-design.less";
<style lang="scss">
@import "./app-dashboard-design.scss";
</style>
\ No newline at end of file
.app-data-card{
padding: 10px;
.data-item{
display: flex;
margin-bottom: 16px;
.item-text{
.srfmajortext{
font-size: 18px;
font-weight: bold;
}
.srfdescription{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
}
.item-icon{
width: 50px;
height: 50px;
margin-right: 10px;
.single-card-img{
border-radius: 50%;
width: 100%;
height: 100%;
}
}
}
.data-view-item-action{
width: 100%;
display: flex;
justify-content: space-around;
border-top: 1px solid #e2e2e2;
padding-top: 10px;
button{
width: 50%;
font-size: 15px;
border: none;
background-color: transparent;
border: none;
}
}
}
\ No newline at end of file
<template>
<div class="app-data-card">
<div class="data-item">
<div class="item-icon">
<img v-if="inputData.srficonpath" :src="inputData.srficonpath" class="single-card-img" />
<img v-else src="/assets/img/noimage.png" class="single-card-img" />
</div>
<div class="item-text">
<div class="srfmajortext">{{inputData.srfmajortext}}</div>
<div class="srfdescription" :title="inputData.srfdescription">{{inputData.srfdescription}}</div>
</div>
</div>
<div class="data-view-item-action" v-if="actionModel">
<template v-for="(action,index) in Object.keys(actionModel)">
<button type="info" :key="index" @click="uiAction(inputData, action, $event)">
<i :class="actionModel[action].icon" style="margin-right:2px;"></i>
<span>{{actionModel[action].caption}}</span>
</button>
</template>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject,Subscription } from 'rxjs';
@Component({
})
export default class AppDataCard extends Vue {
/**
* 面板数据对象
*
* @type {*}
* @memberof AppDataCard
*/
@Prop() public inputData?: any;
/**
* 操作栏模型
*
* @type {*}
* @memberof AppDataCard
*/
@Prop() public actionModel:any;
/**
* 操作列界面行为
*
* @param {*} data
* @param {*} tag
* @param {*} $event
* @memberof AppDataCard
*/
public uiAction(data: any, tag: any, $event: any) {
this.$emit('uiAction',data, tag, $event)
}
}
</script>
<style lang="scss">
@import './app-data-card.scss';
</style>
\ No newline at end of file
// 导入视图样式
.app-data-upload-view{
font-family: "Microsoft YaHei";
display: flex;
flex-direction: column;
.main-content{
height: calc(100% - 68px);
background: #FAFAFB;
border-radius: 4px;
border: 1px dashed #D7D7D7;
margin-top: 10px;
// 上传文件区域
.upload-container{
cursor: pointer;
height: 100%;
width: 100%;
text-align: center;
padding-top: 58px;
.icon-import{
display: block;
margin: 0 auto 17px;
}
.select-file-text{
height: 17px;
font-size: 12px;
color: #565656;
line-height: 17px;
}
}
// 信息展示容器
.data-info-container{
padding: 8px 10px 6px;
height: 100%;
width: 100%;
// 进度条
.progress{
margin-bottom: 6px ;
.el-progress-bar__outer{
background-color: #FFFFFF;
}
.el-progress-bar__inner{
background-color: #D7E9FF;
}
}
.message-container{
height: calc(100% - 26px);
display: flex;
justify-content: space-between;
ul li{
list-style-type: none;
padding-left: 20px;
}
.result-list{
height: 100%;
width: 100%;
overflow: auto;
}
//成功信息区
.result-list{
ul .success-item{
background: url("~@/assets/img/icon-success.svg") no-repeat 5px 5px;
background-size: 10px 10px;
}
}
//错误信息区
.result-list{
ul .error-item{
background: url("~@/assets/img/icon-error.svg") no-repeat 5px 5px;
background-size: 10px 10px;
}
}
}
}
}
// 下载模板区
.second-content{
padding: 16px 12px 0;
margin-bottom: 30px;
.import-template-message{
font-size: 12px;
height: 17px;
color: #565656;
line-height: 17px;
}
.import-template{
.icon-link{
width: 12px;
margin-bottom: -1px;
margin-right: 3px;
}
height: 17px;
font-size: 12px;
color: #57A3FD;
line-height: 17px;
}
}
// 底部按钮
.button-container{
text-align: right;
margin: 15px;
height: 28px;
.el-button{
margin: 0 0 0 8px;
padding: 3px 15px;
font-size: 12px;
line-height: 20px;
}
.primary-button{
color: #FFFFFF;
background-color: #57A3FD;
border-color: #57A3FD;
&:hover{
background: #66b1ff;
border-color: #66b1ff;
}
&:disabled{
color: var(--button-font-color-light);
border-color: var(--button-font-color-light);
background-color: var(--button-background-color-light);
}
}
}
}
//模态样式
.view-default.app-data-upload-modal{
.app-data-upload-view{
width: 100%;
height: 100%;
padding: 0 20px 24px 20px;
}
.ivu-modal-content .ivu-modal-body{
height: calc(100% - 58px);
}
// 模态标题
.ivu-modal-header{
padding: 16px;
border: 0;
.ivu-modal-header-inner{
color: #333333;
font-weight: 600;
height: 24px;
line-height: 24px;
}
}
// 关闭图标
.ivu-modal-close .ivu-icon-ios-close{
color: #999999;
font-weight: 600;
}
// 导入视图样式
.app-data-upload-view{
font-family: "Microsoft YaHei";
display: flex;
flex-direction: column;
.main-content{
height: calc(100% - 68px);
background: #FAFAFB;
border-radius: 4px;
border: 1px dashed #D7D7D7;
margin-top: 10px;
// 上传文件区域
.upload-container{
cursor: pointer;
height: 100%;
width: 100%;
text-align: center;
padding-top: 58px;
.icon-import{
display: block;
margin: 0 auto 17px;
}
.select-file-text{
height: 17px;
font-size: 12px;
color: #565656;
line-height: 17px;
}
}
// 信息展示容器
.data-info-container{
padding: 8px 10px 6px;
height: 100%;
width: 100%;
// 进度条
.progress{
margin-bottom: 6px ;
.el-progress-bar__outer{
background-color: #FFFFFF;
}
.el-progress-bar__inner{
background-color: #D7E9FF;
}
}
.message-container{
height: calc(100% - 26px);
display: flex;
justify-content: space-between;
ul li{
list-style-type: none;
padding-left: 20px;
}
.result-list{
height: 100%;
width: 100%;
overflow: auto;
}
//成功信息区
.result-list{
ul .success-item{
background: url("~@/assets/img/icon-success.svg") no-repeat 5px 5px;
background-size: 10px 10px;
}
}
//错误信息区
.result-list{
ul .error-item{
background: url("~@/assets/img/icon-error.svg") no-repeat 5px 5px;
background-size: 10px 10px;
}
}
}
}
}
// 下载模板区
.second-content{
padding: 16px 12px 0;
margin-bottom: 30px;
.import-template-message{
font-size: 12px;
height: 17px;
color: #565656;
line-height: 17px;
}
.import-template{
.icon-link{
width: 12px;
margin-bottom: -1px;
margin-right: 3px;
}
height: 17px;
font-size: 12px;
color: #57A3FD;
line-height: 17px;
}
}
// 底部按钮
.button-container{
text-align: right;
margin: 15px;
height: 28px;
.el-button{
margin: 0 0 0 8px;
padding: 3px 15px;
font-size: 12px;
line-height: 20px;
}
.primary-button{
color: #FFFFFF;
background-color: #57A3FD;
border-color: #57A3FD;
&:hover{
background: #66b1ff;
border-color: #66b1ff;
}
&:disabled{
color: var(--button-font-color-light);
border-color: var(--button-font-color-light);
background-color: var(--button-background-color-light);
}
}
}
}
//模态样式
.view-default.app-data-upload-modal{
.app-data-upload-view{
width: 100%;
height: 100%;
padding: 0 20px 24px 20px;
}
.ivu-modal-content .ivu-modal-body{
height: calc(100% - 58px);
}
// 模态标题
.ivu-modal-header{
padding: 16px;
border: 0;
.ivu-modal-header-inner{
color: #333333;
font-weight: 600;
height: 24px;
line-height: 24px;
}
}
// 关闭图标
.ivu-modal-close .ivu-icon-ios-close{
color: #999999;
font-weight: 600;
}
}
\ No newline at end of file
......@@ -607,6 +607,6 @@ export default class AppDataUploadView extends Vue {
}
</script>
<style lang="less">
@import "./app-data-upload.less";
<style lang="scss">
@import "./app-data-upload.scss";
</style>
......@@ -431,6 +431,6 @@ export default class AppDepartmentPersonnel extends Vue {
}
</script>
<style lang="less">
@import './app-department-personnel.less';
<style lang="scss">
@import './app-department-personnel.scss';
</style>
\ No newline at end of file
......@@ -283,6 +283,6 @@ export default class AppDepartmentSelect extends Vue {
}
</script>
<style lang='less'>
@import './app-department-select.less';
<style lang='scss'>
@import './app-department-select.scss';
</style>
\ No newline at end of file
......@@ -285,6 +285,6 @@ export default class AppEmbedPicker extends Vue {
}
</script>
<style lang='less'>
@import './app-embed-picker.less';
<style lang='scss'>
@import './app-embed-picker.scss';
</style>
\ No newline at end of file
......@@ -135,6 +135,6 @@ export default class AppExportExcel extends Vue {
}
</script>
<style lang='less'>
@import './app-export-excel.less';
<style lang='scss'>
@import './app-export-excel.scss';
</style>
......@@ -513,6 +513,6 @@ export default class AppFileUpload extends Vue {
}
</script>
<style lang='less'>
@import './app-file-upload.less';
<style lang='scss'>
@import './app-file-upload.scss';
</style>
\ No newline at end of file
......@@ -497,6 +497,6 @@ export default class AppFormDRUIPart extends Vue {
}
}
</script>
<style lang = "less">
@import './app-form-druipart.less';
<style lang="scss">
@import './app-form-druipart.scss';
</style>
\ No newline at end of file
......@@ -351,6 +351,6 @@ export default class AppFormGroup extends Vue {
}
}
</script>
<style lang='less'>
@import './app-form-group.less';
<style lang='scss'>
@import './app-form-group.scss';
</style>
\ No newline at end of file
......@@ -62,6 +62,6 @@ export default class AppFormGroup2 extends Vue {
}
</script>
<style lang="less">
@import './app-form-group2.less';
<style lang="scss">
@import './app-form-group2.scss';
</style>
\ No newline at end of file
......@@ -288,6 +288,6 @@ export default class AppFormItem extends Vue {
}
</script>
<style lang='less'>
@import "./app-form-item.less";
<style lang='scss'>
@import "./app-form-item.scss";
</style>
\ No newline at end of file
......@@ -211,6 +211,6 @@ export default class AppFormItem2 extends Vue {
}
}
</script>
<style lang="less">
@import "./app-form-item2.less";
<style lang="scss">
@import "./app-form-item2.scss";
</style>
\ No newline at end of file
......@@ -239,6 +239,6 @@ export default class AppFormPart extends Vue {
}
</script>
<style lang = "less">
@import './app-form-part.less';
<style lang="scss">
@import './app-form-part.scss';
</style>
\ No newline at end of file
......@@ -28,6 +28,6 @@ export default class AppForm extends Vue {
@Prop() public name?: string;
}
</script>
<style lang = "less">
@import './app-form.less';
<style lang="scss">
@import './app-form.scss';
</style>
\ No newline at end of file
......@@ -91,6 +91,6 @@ export default class AppFormatData extends Vue {
}
</script>
<style lang="less">
@import './app-format-data.less';
<style lang="scss">
@import './app-format-data.scss';
</style>
\ No newline at end of file
<template>
<div class="fullscren">
<Icon :type="fullScren == true ? 'ios-contract' : 'ios-expand'" size="22" @click="handleScreen"/>
<Icon :type="fullScren == true ? 'ios-contract' : 'ios-expand'" color="#aaa" size="22" @click="handleScreen"/>
</div>
</template>
<script lang = 'ts'>
......@@ -82,7 +82,7 @@ export default class AppFullScren extends Vue{
}
</script>
<style lang='less'>
<style lang='scss'>
.fullscren{
cursor:pointer;
padding: 0 5px;
......
......@@ -283,7 +283,7 @@ export default class AppGroupPicker extends Vue {
}
</script>
<style lang="less">
<style lang="scss">
.ibiz-group-picker{
width: 100%;
height: 100%;
......
......@@ -327,6 +327,6 @@ export default class AppGroupSelect extends Vue {
}
</script>
<style lang="less">
@import './app-group-select.less';
<style lang="scss">
@import './app-group-select.scss';
</style>
\ No newline at end of file
......@@ -74,6 +74,6 @@ export default class AppQuickMenus extends Vue {
}
</script>
<style lang='less'>
@import "./app-icon-menus.less";
<style lang='scss'>
@import "./app-icon-menus.scss";
</style>
\ No newline at end of file
......@@ -199,6 +199,6 @@ export default class AppImagePreview extends Vue {
}
</script>
<style lang = "less">
@import './app-image-preview.less';
<style lang="scss">
@import './app-image-preview.scss';
</style>
\ No newline at end of file
......@@ -503,6 +503,6 @@ export default class AppImageUpload extends Vue {
}
}
</script>
<style lang = "less">
@import './app-image-upload.less';
<style lang="scss">
@import './app-image-upload.scss';
</style>
\ No newline at end of file
......@@ -184,6 +184,6 @@ export default class AppInputIp extends Vue {
}
</script>
<style lang='less'>
@import './app-input-ip.less';
<style lang='scss'>
@import './app-input-ip.scss';
</style>
......@@ -177,7 +177,7 @@ export default {
}
</script>
<style lang="less">
<style lang="scss">
</style>
......@@ -67,6 +67,6 @@ export default class AppLang extends Vue {
}
</script>
<style lang="less">
@import './app-lang.less';
<style lang="scss">
@import './app-lang.scss';
</style>
\ No newline at end of file
.app-list-itemlayoutpanel{
padding: 0 0 0 20px;
// margin: 10px;
.srfmajortext{
font-size: 16px;
cursor: pointer;
}
.srfdescription{
margin-bottom: 10px;
}
.el-tag{
margin: 10px 6px 10px 0;
color: #000;
padding: 0 16px;
max-height: 24px;
line-height: 24px;
background-color: rgb(250, 250, 250)
}
.srfmajortext:hover{
color: #40a9ff;
}
.user-information{
display: flex;
.srficon{
width: 28px;
height: 28px;
margin-right: 6px;
>img{
width: 100%;
border-radius: 50%;
height: 100%;
}
}
}
.app-list-item-action{
margin-top:6px;
>a{
margin:0 20px 0 0 !important;
}
}
}
<template>
<div v-if="inputData" class="app-list-itemlayoutpanel">
<h4 class="srfmajortext">{{inputData.srfmajortext}}</h4>
<template v-for="(tagitem,index) of tagArr">
<el-tag v-if="tagArr" type="info" size="medium" :key="index">{{tagitem}}</el-tag>
</template>
<p class="srfdescription">{{inputData.srfdescription}}</p>
<div class="user-information">
<div class="srficon">
<img v-if="inputData.srficon" :src="inputData.srficon" />
<img v-else src="/assets/img/noimage.png" alt="">
</div>
<span class="srfdate">{{inputData.srfdate}}</span>
</div>
<div class="app-list-item-action" v-if="actionModel">
<template v-for="(action,index) in Object.keys(actionModel)">
<a :key="index" style="display: inline-block;margin: 0 12px;" @click="uiAction(inputData, action, $event)">
<i :class="actionModel[action].icon" style="margin-right:2px;"></i>
<span>{{actionModel[action].caption}}</span>
</a>
</template>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject,Subscription } from 'rxjs';
@Component({
})
export default class AppListItemlayoutpanel extends Vue {
/**
* 传递数据
*
* @type {any}
* @memberof AppListItemlayoutpanel
*/
@Prop() public inputData: any;
/**
* 操作栏模型
*
* @type {*}
* @memberof AppListItemlayoutpanel
*/
@Prop() public actionModel:any;
/**
* 处理数据
*
* @memberof AppListItemlayoutpanel
*/
public tagArr:Array<any>=[];
/**
* 操作列界面行为
*
* @param {*} data
* @param {*} tag
* @param {*} $event
* @memberof AppListItemlayoutpanel
*/
public uiAction(data: any, tag: any, $event: any) {
this.$emit('uiAction',data, tag, $event)
}
/**
* vue生命周期
*
* @memberof AppListItemlayoutpanel
*/
public created(){
if(this.inputData && this.inputData.srftag){
this.tagArr = this.inputData.srftag.split(',');
}
}
}
</script>
<style lang='scss'>
@import './app-list-itemlayoutpanel.scss';
</style>
\ No newline at end of file
<template>
<div class="lockscren">
<span>
<Icon type="md-lock" size="22" @click="handleLock"/>
<Icon type="md-lock" size="22" color="#aaa" @click="handleLock"/>
<el-dialog :title="this.$t('components.lockScren.title')"
:visible.sync="box"
width="30%"
......@@ -91,7 +91,7 @@ export default class AppLockScren extends Vue{
}
</script>
<style lang='less'>
<style lang='scss'>
.lockscren{
cursor:pointer;
padding: 0 5px;
......
......@@ -116,6 +116,6 @@ export default class AppLockIndex extends Vue{
}
</script>
<style lang='less'>
@import './app-lock.less';
<style lang='scss'>
@import './app-lock.scss';
</style>
\ No newline at end of file
......@@ -464,6 +464,6 @@ export default class AppMapPosition extends Vue {
}
</script>
<style lang='less'>
@import './app-map-position.less';
<style lang='scss'>
@import './app-map-position.scss';
</style>
\ No newline at end of file
......@@ -19,6 +19,7 @@
font-size: 19px;
padding-top: 2px;
padding-right: 2px;
color: #aaa;
cursor: pointer;
}
......
......@@ -224,6 +224,6 @@ export default class AppMessagePopover extends Vue {
}
</script>
<style lang='less'>
@import "app-message-popover.less";
<style lang='scss'>
@import "app-message-popover.scss";
</style>
\ No newline at end of file
......@@ -386,6 +386,6 @@ export default class AppMpicker extends Vue {
}
</script>
<style lang="less">
@import './app-mpicker.less';
<style lang="scss">
@import './app-mpicker.scss';
</style>
\ No newline at end of file
......@@ -320,6 +320,6 @@ export default class AppOrgSelect extends Vue {
}
</script>
<style lang="less">
@import "./app-org-select.less";
<style lang="scss">
@import "./app-org-select.scss";
</style>
\ No newline at end of file
......@@ -151,6 +151,6 @@ export default class AppOrgSector extends Vue {
}
</script>
<style lang="less">
@import "./app-orgsector.less";
<style lang="scss">
@import "./app-orgsector.scss";
</style>
\ No newline at end of file
......@@ -57,6 +57,6 @@ export default class AppPanelButton extends Vue {
}
</script>
<style lang='less'>
<style lang='scss'>
</style>
\ No newline at end of file
......@@ -201,6 +201,6 @@ export default class AppPanelField extends Vue {
}
}
</script>
<style lang='less'>
@import "./app-panel-field.less";
<style lang='scss'>
@import "./app-panel-field.scss";
</style>
\ No newline at end of file
......@@ -586,6 +586,6 @@ export default class AppPickerSelectView extends Vue {
}
</script>
<style lang='less'>
@import './app-picker-select-view.less';
<style lang='scss'>
@import './app-picker-select-view.scss';
</style>
\ No newline at end of file
......@@ -872,6 +872,6 @@ export default class AppPicker extends Vue {
}
</script>
<style lang="less">
@import './app-picker.less';
<style lang="scss">
@import './app-picker.scss';
</style>
\ No newline at end of file
......@@ -174,6 +174,6 @@ export default class AppPortalDesign extends Vue {
}
</script>
<style lang='less'>
@import "./app-portal-design.less";
<style lang='scss'>
@import "./app-portal-design.scss";
</style>
\ No newline at end of file
......@@ -172,6 +172,6 @@ export default class AppQuickGroup extends Vue {
}
</script>
<style lang='less'>
@import "./app-quick-group.less";
<style lang='scss'>
@import "./app-quick-group.scss";
</style>
\ No newline at end of file
......@@ -67,6 +67,6 @@ export default class AppQuickMenus extends Vue {
}
</script>
<style lang='less'>
@import "./app-quick-menus.less";
<style lang='scss'>
@import "./app-quick-menus.scss";
</style>
\ No newline at end of file
<template>
<el-radio-group class="app-radio-button" v-model="value">
<el-radio-button v-for="(_item,index) in items" :key = "index" :label="_item.value" :disabled="isDisabled || _item.disabled">
<span>{{Object.is(codelistType,'STATIC') ? $t('codelist.'+tag+'.'+_item.value) : _item.text}}</span>
</el-radio-button>
</el-radio-group>
</template>
<script lang = 'ts'>
import { Component, Vue, Prop, Model,Watch } from 'vue-property-decorator';
import CodeListService from "@/codelist/codelist-service";
@Component({})
export default class AppRadioButton extends Vue {
/**
* 代码表服务对象
*
* @type {CodeListService}
* @memberof AppRadioButton
*/
public codeListService:CodeListService = new CodeListService({ $store: this.$store });
/**
* 双向绑定值
*
* @type {*}
* @memberof AppRadioButton
*/
@Model('change') item?: any;
/**
* 获取值
*
* @memberof AppRadioButton
*/
get value() {
return this.item;
}
/**
* 设置值
*
* @memberof AppRadioButton
*/
set value(val: any) {
this.$emit('change', val);
}
/**
* 代码表标识
*
* @type {string}
* @memberof AppRadioButton
*/
@Prop() public tag?: string;
/**
* 代码表类型
*
* @type {string}
* @memberof AppRadioButton
*/
@Prop() public codelistType?: string;
/**
* 传入表单数据
*
* @type {*}
* @memberof AppRadioButton
*/
@Prop() public data?: any;
/**
* 监听表单数据变化
*
* @memberof AppRadioButton
*/
@Watch('data',{immediate:true,deep:true})
onDataChange(newVal: any, oldVal: any) {
if(newVal){
if(this.tag && this.codelistType == 'DYNAMIC'){
// 公共参数处理
let data: any = {};
this.handlePublicParams(data);
// 参数处理
let _context = data.context;
let _param = data.param;
console.log("app-radio-group")
this.codeListService.getItems(this.tag,_context,_param).then((res:any) => {
this.items = res;
}).catch((error:any)=>{
console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
})
}
}
}
/**
* 是否禁用
*
* @type {boolean}
* @memberof AppRadioButton
*/
@Prop() public disabled?: boolean;
/**
* 局部上下文导航参数
*
* @type {any}
* @memberof AppRadioButton
*/
@Prop() public localContext!:any;
/**
* 局部导航参数
*
* @type {any}
* @memberof AppRadioButton
*/
@Prop() public localParam!:any;
/**
* 视图上下文
*
* @type {*}
* @memberof AppRadioButton
*/
@Prop() public context!: any;
/**
* 视图参数
*
* @type {*}
* @memberof AppRadioButton
*/
@Prop() public viewparams!: any;
/**
* 属性名称
*
* @type {string}
* @memberof AppRadioButton
*/
@Prop() name?: string;
/**
* 是否禁用
*
* @readonly
* @memberof AppRadioButton
*/
get isDisabled() {
if (this.disabled) {
return true;
} else {
return false;
}
}
/**
* 代码表
*
* @type {any[]}
* @memberof AppRadioButton
*/
public items: any[] = [];
/**
* 公共参数处理
*
* @param {*} arg
* @returns
* @memberof AppRadioButton
*/
public handlePublicParams(arg: any) {
// 合并表单参数
arg.param = this.viewparams ? JSON.parse(JSON.stringify(this.viewparams)) : {};
arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {};
// 附加参数处理
if (this.localContext && Object.keys(this.localContext).length >0) {
let _context = this.$util.computedNavData(this.data,arg.context,arg.param,this.localContext);
Object.assign(arg.context,_context);
}
if (this.localParam && Object.keys(this.localParam).length >0) {
let _param = this.$util.computedNavData(this.data,arg.param,arg.param,this.localParam);
Object.assign(arg.param,_param);
}
}
/**
* vue 生命周期
*
* @memberof AppRadioButton
*/
public created() {
if(this.tag && this.codelistType == 'STATIC'){
this.items = this.$store.getters.getCodeListItems(this.tag);
}else if(this.tag && this.codelistType == 'DYNAMIC'){
// 公共参数处理
let data: any = {};
this.handlePublicParams(data);
// 参数处理
let _context = data.context;
let _param = data.param;
this.codeListService.getItems(this.tag,_context,_param).then((res:any) => {
this.items = res;
}).catch((error:any)=>{
console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
})
}
}
}
</script>
<style lang="scss">
.app-radio-button {
overflow: auto;
.el-radio-button__inner{
padding: 10px 14px;
}
}
</style>
\ No newline at end of file
......@@ -303,6 +303,6 @@ export default class AppRadioGroup extends Vue {
}
}
</script>
<style lang="less">
@import './app-radio-group.less';
<style lang="scss">
@import './app-radio-group.scss';
</style>
\ No newline at end of file
......@@ -197,6 +197,6 @@ export default class AppRangDate extends Vue {
}
</script>
<style lang='less'>
@import "./app-range-date.less";
<style lang='scss'>
@import "./app-range-date.scss";
</style>
\ No newline at end of file
......@@ -176,6 +176,6 @@ export default class AppRangeEditor extends Vue {
}
</script>
<style lang='less'>
@import './app-range-editor.less';
<style lang='scss'>
@import './app-range-editor.scss';
</style>
\ No newline at end of file
......@@ -220,6 +220,6 @@ export default class AppRate extends Vue {
}
</script>
<style lang="less">
@import './app-rate.less';
<style lang="scss">
@import './app-rate.scss';
</style>
......@@ -94,6 +94,6 @@ export default class AppRawItem extends Vue {
</script>
<style lang='less'>
<style lang='scss'>
</style>
\ No newline at end of file
......@@ -432,5 +432,5 @@ export default class AppRichTextEditor extends Vue {
}
}
</script>
<style lang="less">
<style lang="scss">
</style>
\ No newline at end of file
......@@ -39,6 +39,6 @@ export default class AppSiderMenus extends Vue {
}
</script>
<style lang='less'>
@import "./app-sider-menus.less";
<style lang='scss'>
@import "./app-sider-menus.scss";
</style>
\ No newline at end of file
......@@ -94,6 +94,6 @@ export default class AppSlider extends Vue {
}
</script>
<style lang='less'>
@import "./app-slider.less";
<style lang='scss'>
@import "./app-slider.scss";
</style>
\ No newline at end of file
......@@ -63,22 +63,22 @@
}
}
}
.slide-in(@x-begin,@x-end,@c-begin,@c-end,@name){
@keyframes @name{
@mixin slide-in($x-begin,$x-end,$c-begin,$c-end){
@keyframes fadein{
from {
transform: translateX(@x-begin);
background-color: @c-begin;
transform: translateX($x-begin);
background-color: $c-begin;
}
to {
transform: translateX(@x-end);
background-color: @c-end;
transform: translateX($x-end);
background-color: $c-end;
}
}
}
.slide-in(1670px,0px,#fff,#EEF2F5,fadein);
.animation(@animation-name,@animation-duration,@animation-timing-function,@animation-delay,@play-state){
animation: @arguments;
@include slide-in(1670px,0px,#fff,#EEF2F5);
@mixin animation($animation-name,$animation-duration,$animation-timing-function,$animation-delay,$play-state){
animation:$animation-name $animation-duration $animation-timing-function $animation-delay $play-state;
};
.open-bar {
.animation(fadein,0.7s,linear,0s,forwards);
@include animation(fadein,0.7s,linear,0s,forwards);
};
\ No newline at end of file
......@@ -60,6 +60,6 @@ export default class AppSortBar extends Vue {
}
</script>
<style lang="less">
@import './app-sort-bar.less';
<style lang="scss">
@import './app-sort-bar.scss';
</style>
\ No newline at end of file
......@@ -240,6 +240,6 @@ export default class AppSpan extends Vue {
}
</script>
<style lang='less'>
@import './app-span.less';
<style lang='scss'>
@import './app-span.scss';
</style>
\ No newline at end of file
......@@ -72,6 +72,6 @@ export default class AppStepper extends Vue {
}
</script>
<style lang='less'>
@import "./app-stepper.less";
<style lang='scss'>
@import "./app-stepper.scss";
</style>
\ No newline at end of file
......@@ -37,6 +37,6 @@ export default class AppSwitch extends Vue {
}
</script>
<style lang='less'>
@import './app-switch.less';
<style lang='scss'>
@import './app-switch.scss';
</style>
\ No newline at end of file
......@@ -5,7 +5,9 @@
popper-class='app-app-theme'
placement='bottom-end'
:width="Object.is($i18n.locale, 'zh-CN') ? 180 : 250">
<icon class='app-theme-icon' type='md-settings' :size="22" />
<a>
<icon class='app-theme-icon' type='md-settings' :size="22" />
</a>
<template slot='content'>
<div class='app-theme-color'>
<template v-for="(theme, index) in defaultThemes">
......@@ -139,6 +141,6 @@ export default class AppTheme extends Vue {
}
</script>
<style lang="less">
@import './app-theme.less';
<style lang="scss">
@import './app-theme.scss';
</style>
\ No newline at end of file
......@@ -187,6 +187,6 @@ export default class AppTodoList extends Vue {
}
</script>
<style lang="less">
@import './app-todo-list.less';
<style lang="scss">
@import './app-todo-list.scss';
</style>
\ No newline at end of file
......@@ -301,6 +301,6 @@ export default class AppTransfer extends Vue {
}
</script>
<style lang='less'>
@import "./app-transfer.less";
<style lang='scss'>
@import "./app-transfer.scss";
</style>
\ No newline at end of file
......@@ -330,6 +330,6 @@ export default class AppTreePicker extends Vue {
}
</script>
<style lang='less'>
@import './app-tree-picker.less';
<style lang='scss'>
@import './app-tree-picker.scss';
</style>
\ No newline at end of file
......@@ -145,6 +145,6 @@ export default class AppUpdatePassword extends Vue {
}
</script>
<style lang="less">
@import './app-update-password.less';
<style lang="scss">
@import './app-update-password.scss';
</style>
\ No newline at end of file
......@@ -378,6 +378,6 @@ export default class AppUpicker extends Vue {
}
}
</script>
<style lang="less">
@import './app-upicker.less';
<style lang="scss">
@import './app-upicker.scss';
</style>
......@@ -107,6 +107,6 @@ export default class AppUploadFileInfo extends Vue {
}
</script>
<style lang='less'>
@import './app-upload-file-info.less';
<style lang='scss'>
@import './app-upload-file-info.scss';
</style>
\ No newline at end of file
......@@ -109,6 +109,6 @@ export default class AppUser extends Vue {
}
</script>
<style lang="less">
@import './app-user.less';
<style lang="scss">
@import './app-user.scss';
</style>
\ No newline at end of file
......@@ -198,7 +198,7 @@ export default class AppVuePivotTable extends Vue {
}
</script>
<style lang="less">
<style lang="scss">
.app-vue-pivottable {
height: calc(100% - 1px);
.pvtTable {
......
......@@ -116,6 +116,6 @@ export default class AppWFApproval extends Vue {
}
</script>
<style lang="less">
@import './app-wf-approval.less';
<style lang="scss">
@import './app-wf-approval.scss';
</style>
\ No newline at end of file
......@@ -334,7 +334,7 @@ export default class CodeList extends Vue {
}
</script>
<style lang='less'>
<style lang='scss'>
.codelist {
display: flex;
white-space: nowrap;
......
......@@ -49,6 +49,6 @@ export default class ContextMenuContainer extends Vue {
}
</script>
<style lang='less'>
<style lang='scss'>
</style>
......@@ -305,6 +305,6 @@ export default class ContextMenuDrag extends Vue {
}
</script>
<style lang='less'>
@import './context-menu-drag.less';
<style lang='scss'>
@import './context-menu-drag.scss';
</style>
......@@ -48,7 +48,7 @@ class ContextMenuService {
const service = new ContextMenuService();
import { Vue, Component, Provide, Prop, Emit } from 'vue-property-decorator';
import './context-menu.less';
import './context-menu.scss';
@Component({})
export default class ContextMenu extends Vue {
......
......@@ -70,7 +70,7 @@ export default class CronEditor extends Vue {
</script>
<style lang="less">
<style lang="scss">
.transfer-select{
.ivu-select-dropdown {
padding: 0px;
......
......@@ -247,7 +247,7 @@ export default class VueCron extends Vue {
</script>
<style lang="less">
<style lang="scss">
.cron {
text-align: left;
padding: 10px;
......
......@@ -92,6 +92,6 @@ export default class DateRange extends Vue {
}
</script>
<style lang = "less">
@import "./date-picker-range.less";
<style lang="scss">
@import "./date-picker-range.scss";
</style>
\ No newline at end of file
......@@ -631,7 +631,7 @@
}
}
</script>
<style lang="less">
<style lang="scss">
#file-upload {
width: auto;
height: auto;
......
......@@ -694,7 +694,7 @@
}
</script>
<style lang="less">
<style lang="scss">
.dialogDiv {
// el-dialog头部
.el-dialog__header {
......
......@@ -290,6 +290,6 @@ export default class DropDownListDynamic extends Vue {
}
</script>
<style lang='less'>
@import './dropdown-list-dynamic.less';
<style lang='scss'>
@import './dropdown-list-dynamic.scss';
</style>
\ No newline at end of file
......@@ -474,6 +474,6 @@ export default class DropDownList extends Vue {
}
</script>
<style lang='less'>
@import './dropdown-list-hidden.less';
<style lang='scss'>
@import './dropdown-list-hidden.scss';
</style>
\ No newline at end of file
......@@ -332,6 +332,6 @@ export default class DropDownListMpicker extends Vue {
}
</script>
<style lang='less'>
@import './dropdown-list-mpicker.less';
<style lang='scss'>
@import './dropdown-list-mpicker.scss';
</style>
\ No newline at end of file
......@@ -472,6 +472,6 @@ export default class DropDownList extends Vue {
}
</script>
<style lang='less'>
@import './dropdown-list.less';
<style lang='scss'>
@import './dropdown-list.scss';
</style>
\ No newline at end of file
......@@ -247,6 +247,6 @@ export default class ExtendActionTimeline extends Vue {
}
</script>
<style lang='less'>
@import './extend-action-timeline.less';
<style lang='scss'>
@import './extend-action-timeline.scss';
</style>
\ No newline at end of file
......@@ -236,6 +236,6 @@ export default class FilterTree extends Vue {
}
</script>
<style lang="less">
@import './filter-tree.less';
<style lang="scss">
@import './filter-tree.scss';
</style>
\ No newline at end of file
......@@ -220,6 +220,6 @@ export default class InputBox extends Vue {
}
</script>
<style lang='less'>
@import "./input-box.less";
<style lang='scss'>
@import "./input-box.scss";
</style>
\ No newline at end of file
......@@ -86,6 +86,6 @@ export default class AppIndexNavBreadcrumb extends Vue {
}
</script>
<style lang='less'>
@import './app-index-nav-breadcrumb.less';
<style lang='scss'>
@import './app-index-nav-breadcrumb.scss';
</style>
\ No newline at end of file
......@@ -69,6 +69,6 @@ export default class AppIndexNavTabs extends Vue {
}
</script>
<style lang='less'>
@import './app-index-nav-tabs.less';
<style lang='scss'>
@import './app-index-nav-tabs.scss';
</style>
\ No newline at end of file
......@@ -69,6 +69,6 @@ export default class AppIndexOrgSelect extends Vue {
}
</script>
<style lang='less'>
@import './app-index-org-select.less';
<style lang='scss'>
@import './app-index-org-select.scss';
</style>
\ No newline at end of file
......@@ -69,6 +69,6 @@ export default class AppIndexUserInfo extends Vue {
}
</script>
<style lang='less'>
@import './app-index-user-info.less';
<style lang='scss'>
@import './app-index-user-info.scss';
</style>
\ No newline at end of file
......@@ -233,6 +233,6 @@ export default class AppPresetButton extends Vue {
}
}
</script>
<style lang='less'>
@import './app-preset-button.less';
<style lang='scss'>
@import './app-preset-button.scss';
</style>
\ No newline at end of file
......@@ -167,6 +167,6 @@ export default class AppPresetQrCode extends Vue {
}
</script>
<style lang='less'>
@import './app-preset-qrcode.less';
<style lang='scss'>
@import './app-preset-qrcode.scss';
</style>
\ No newline at end of file
......@@ -107,6 +107,6 @@ export default class AppPresetSwitch extends Vue {
}
</script>
<style lang='less'>
@import './app-preset-switch.less';
<style lang='scss'>
@import './app-preset-switch.scss';
</style>
\ No newline at end of file
......@@ -120,6 +120,6 @@ export default class AppPresetTextInput extends Vue {
}
</script>
<style lang='less'>
@import './app-preset-text-input.less';
<style lang='scss'>
@import './app-preset-text-input.scss';
</style>
\ No newline at end of file
......@@ -237,6 +237,6 @@ export default class AppLoginButton extends Vue {
}
</script>
<style lang="less">
@import "./app-login-button.less";
<style lang="scss">
@import "./app-login-button.scss";
</style>
......@@ -131,7 +131,7 @@ export default class AppLoginCaptcha extends Vue {
}
</script>
<style lang="less">
<style lang="scss">
.app-login-captcha {
height: 40px;
width: 100%;
......
......@@ -573,6 +573,6 @@ export default {
}
};
</script>
<style lang="less">
@import './vue-puzzle-code.less';
<style lang="scss">
@import './vue-puzzle-code.scss';
</style>
......@@ -152,6 +152,6 @@ export default class AppLoginInput extends Vue {
}
</script>
<style lang="less">
@import "./app-login-input.less";
<style lang="scss">
@import "./app-login-input.scss";
</style>
\ No newline at end of file
......@@ -79,6 +79,6 @@ export default class AppLoginMessage extends Vue {
}
</script>
<style lang='less'>
@import "./app-login-message.less";
<style lang='scss'>
@import "./app-login-message.scss";
</style>
\ No newline at end of file
......@@ -193,6 +193,6 @@ export default class AppLoginNoteVerify extends Vue {
}
</script>
<style lang="less">
@import "./app-login-note-verify.less";
<style lang="scss">
@import "./app-login-note-verify.scss";
</style>
......@@ -129,6 +129,6 @@ export default class AppLoginOrg extends Vue {
}
}
</script>
<style lang="less">
@import './app-login-org.less';
<style lang="scss">
@import './app-login-org.scss';
</style>
\ No newline at end of file
......@@ -123,6 +123,6 @@ export default class AppThirdLogin extends Vue {
}
</script>
<style lang="less">
@import "./app-login-third.less";
<style lang="scss">
@import "./app-login-third.scss";
</style>
......@@ -127,6 +127,6 @@ export default class AppFieldImageDynamic extends Vue {
}
}
</script>
<style lang = "less">
@import './app-field-image-dynamic.less';
<style lang="scss">
@import './app-field-image-dynamic.scss';
</style>
\ No newline at end of file
......@@ -229,6 +229,6 @@ export default class AppCarousel extends Vue {
}
</script>
<style lang='less'>
@import './app-rawitem-carousel.less';
<style lang='scss'>
@import './app-rawitem-carousel.scss';
</style>
\ No newline at end of file
......@@ -84,6 +84,6 @@ export default class AppRawItemImage extends Vue {
}
</script>
<style lang = "less">
@import './app-rawitem-image.less';
<style lang="scss">
@import './app-rawitem-image.scss';
</style>
\ No newline at end of file
......@@ -136,6 +136,6 @@ export default class AppRawItemVideo extends Vue {
}
</script>
<style lang='less'>
@import "./app-rawitem-video.less";
<style lang='scss'>
@import "./app-rawitem-video.scss";
</style>
......@@ -69,6 +69,6 @@ export default class AppCtrlPos extends Vue {
}
</script>
<style lang='less'>
@import './app-ctrl-pos.less';
<style lang='scss'>
@import './app-ctrl-pos.scss';
</style>
\ No newline at end of file
......@@ -154,6 +154,6 @@ export default class AppNavPos extends Vue {
}
</script>
<style lang='less'>
@import './app-nav-pos.less';
<style lang='scss'>
@import './app-nav-pos.scss';
</style>
\ No newline at end of file
......@@ -192,6 +192,6 @@ export default class AppScrollContainer extends Vue {
}
}
</script>
<style lang='less'>
@import 'app-scroll-container.less';
<style lang='scss'>
@import 'app-scroll-container.scss';
</style>
\ No newline at end of file
......@@ -117,6 +117,6 @@ export default class AppSimpleFlexContainer extends Vue {
}
</script>
<style lang='less'>
@import 'app-simpleflex-container.less';
<style lang='scss'>
@import 'app-simpleflex-container.scss';
</style>
\ No newline at end of file
......@@ -148,6 +148,6 @@ export default class AppStandardContainer extends Vue {
}
}
</script>
<style lang='less'>
@import 'app-standard-container.less';
<style lang='scss'>
@import 'app-standard-container.scss';
</style>
\ No newline at end of file
......@@ -114,6 +114,6 @@ export default class AppTabPage extends Vue {
}
</script>
<style lang='less'>
@import './app-tab-page.less';
<style lang='scss'>
@import './app-tab-page.scss';
</style>
\ No newline at end of file
......@@ -124,6 +124,6 @@ export default class AppTabPanel extends Vue {
}
}
</script>
<style lang='less'>
@import './app-tab-panel.less';
<style lang='scss'>
@import './app-tab-panel.scss';
</style>
\ No newline at end of file
......@@ -121,6 +121,6 @@ export default class AppPresetCaption extends Vue {
}
</script>
<style lang='less'>
@import "./app-preset-caption.less";
<style lang='scss'>
@import "./app-preset-caption.scss";
</style>
\ No newline at end of file
......@@ -225,6 +225,6 @@ export default class AppPresetText extends Vue {
}
}
</script>
<style lang="less">
@import './app-preset-text.less';
<style lang="scss">
@import './app-preset-text.scss';
</style>
\ No newline at end of file
......@@ -84,6 +84,6 @@ export default class AppPresetTitle extends Vue {
}
</script>
<style lang='less'>
@import './app-preset-title.less';
<style lang='scss'>
@import './app-preset-title.scss';
</style>
\ No newline at end of file
......@@ -242,6 +242,6 @@ export default class Login extends Vue {
}
</script>
<style lang='less'>
@import './login.less';
<style lang='scss'>
@import './login.scss';
</style>
\ No newline at end of file
import { Vue, Component, Prop } from 'vue-property-decorator';
import './menu-icon.less';
import './menu-icon.scss';
/**
* 平台菜单按钮适配
......
......@@ -43,6 +43,6 @@ export default class PropertyLayout extends Vue {
}
</script>
<style lang='less'>
@import './property-layout.less';
<style lang='scss'>
@import './property-layout.scss';
</style>
\ No newline at end of file
......@@ -311,6 +311,6 @@ export default class TabPageExp extends Vue {
}
</script>
<style lang="less">
@import "./tab-page-exp.less";
<style lang="scss">
@import "./tab-page-exp.scss";
</style>
......@@ -170,6 +170,6 @@ export default class UploadFile extends Vue {
}
</script>
<style lang='less'>
@import './upload-file.less';
<style lang='scss'>
@import './upload-file.scss';
</style>
\ No newline at end of file
.index-view-layout-left {
.header-right {
display: flex;
align-items: center;
justify-content: space-between;
}
.index_sider {
background-color:#FFF;
}
}
\ No newline at end of file
<template>
<layout class="index_view index-view-layout-left" id="movebox">
<sider class="index_sider" :width="collapseChange ? 64 : 200" hide-trigger id="left_move">
<div class="sider-top">
<slot name="siderTop" />
</div>
<slot name="siderContent" />
</sider>
<div v-show="!collapseChange" id="move_axis"></div>
<layout id="right_move">
<header class="index_header">
<div class="header-left">
<slot name="headerLeft" />
</div>
<div class="header-center">
<slot name="headerCenter" />
</div>
<div class="header-right">
<slot name="headerRight" />
</div>
</header>
<content :class="{ 'index_content': true, 'index_tab_content': Object.is(navModel,'tab') ? true : false, 'index_route_content': Object.is(navModel,'route') ? true : false }">
<slot name="tabPageExp" />
<slot name="navPos" />
</content>
</layout>
</layout>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
@Component({})
export default class AppIndexViewLayoutLeft extends Vue {
/**
* 导航模式
*
* @memberof AppIndexViewLayoutLeft
*/
@Prop({ default: 'tab' })
public navModel!: string;
/**
* 是否折叠
*
* @memberof AppIndexViewLayoutLeft
*/
@Prop({ default: false })
public collapseChange!: boolean;
}
</script>
<style lang="less">
@import "./index-view-layout-left.less";
</style>
.index-view-layout--top {
.index-view-layout-header {
height: 64px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--app-color-black);
color: var(--app-color-gray-white);
.header__left {
font-size: 21px;
font-weight: 700;
margin-left: 50px;
.app-icon {
width: 36px;
height: 37px;
margin-right: 6px;
}
}
.header__right {
display: flex;
align-items: center;
}
}
.index-view-layout-content {
height: calc(100% - 64px);
overflow: auto;
padding: 20px 38px 0 38px;
background-color: var(--app-color-gray-gray-400);
}
}
\ No newline at end of file
<template>
<layout class="index-view-layout index-view-layout--top">
<header class="index-view-layout-header">
<div class="header__left">
<slot name="headerLeft" />
</div>
<div class="header__center">
<slot name="headerCenter" />
</div>
<div class="header__right">
<slot name="headerRight" />
</div>
</header>
<content class="index-view-layout-content">
<slot name="navPos" />
</content>
<footer class="layout-footer-center">
<slot name="footer"></slot>
</footer>
</layout>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component({})
export default class AppIndexViewLayoutTop extends Vue {
}
</script>
<style lang="less">
@import "./index-view-layout-top.less";
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册