Skip to content

S
shareConfig
Commit 6360b553 by 无尘
Options

feat: 增加页面

parent 33c5df0d
Showing with 3202 additions and 131 deletions
package.json
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"version": "conventional-changelog -p angular -i changelog.md -s -r 0 && git add changelog.md" "version": "conventional-changelog -p angular -i changelog.md -s -r 0 && git add changelog.md"
}, },
"dependencies": { "dependencies": {
"clipboard": "^2.0.4",
"echarts": "^4.4.0", "echarts": "^4.4.0",
"element-ui": "^2.12.0", "element-ui": "^2.12.0",
"file-saver": "^1.3.8", "file-saver": "^1.3.8",
......
src/common/js/strlen.js
/* /*
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-12 10:18:29
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 15:16:11
*/
/**
* 判断字符长度 * 判断字符长度
* @param: str * @param: str
*/ */
export default { export default {
/* /**
* 一个汉字算两个字符,一个英文字母或数字算一个字符 * 一个汉字算两个字符,一个英文字母或数字算一个字符
*/ */
getByteLen: function(val) { getByteLen: function (val) {
let valStr = val == '' || val == null ? '' : val;
let len = 0; let len = 0;
for (let i = 0; i < val.length; i++) { for (let i = 0; i < valStr.length; i++) {
let a = val.charAt(i); let a = valStr.charAt(i);
if (a.match(/[^\x00-\xff]/gi) != null) { if (a.match(/[^\x00-\xff]/gi) != null) {
len += 2; len += 2;
} else { } else {
...@@ -19,13 +28,14 @@ export default { ...@@ -19,13 +28,14 @@ export default {
} }
return len; return len;
}, },
/* /**
* 一个汉字算一个字,一个英文字母或数字算半个字 * 一个汉字算一个字,一个英文字母或数字算半个字
*/ */
getZhLen: function(val) { getZhLen: function (val) {
let valStr = val == '' || val == null ? '' : val;
let len = 0; let len = 0;
for (let i = 0; i < val.length; i++) { for (let i = 0; i < valStr.length; i++) {
let a = val.charAt(i); let a = valStr.charAt(i);
if (a.match(/[^\x00-\xff]/gi) != null) { if (a.match(/[^\x00-\xff]/gi) != null) {
len += 1; len += 1;
} else { } else {
...@@ -36,7 +46,7 @@ export default { ...@@ -36,7 +46,7 @@ export default {
}, },
/*暂无用*/ /*暂无用*/
cutStr: function(str, len, type) { cutStr: function (str, len, type) {
let char_length = 0; let char_length = 0;
for (let i = 0; i < str.length; i++) { for (let i = 0; i < str.length; i++) {
let son_str = str.charAt(i); let son_str = str.charAt(i);
...@@ -53,40 +63,42 @@ export default { ...@@ -53,40 +63,42 @@ export default {
} }
}, },
/* /**
* 限制字数用, 一个汉字算一个字,两个英文/字母算一个字 * 限制字数用, 一个汉字算一个字,两个英文/字母算一个字
*/ */
getByteVal: function(val, max) { getByteVal: function (val, max) {
let valStr = val == '' || val == null ? '' : val;
let returnValue = ''; let returnValue = '';
let byteValLen = 0; let byteValLen = 0;
for (let i = 0; i < val.length; i++) { for (let i = 0; i < valStr.length; i++) {
if (val[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 1; if (valStr[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 1;
else byteValLen += 0.5; else byteValLen += 0.5;
if (byteValLen > max) break; if (byteValLen > max) break;
returnValue += val[i]; returnValue += valStr[i];
} }
return returnValue; return returnValue;
}, },
/* /**
* 限制字符数用, 一个汉字算两个字符,一个英文/字母算一个字符 * 限制字符数用, 一个汉字算两个字符,一个英文/字母算一个字符
*/ */
getCharVal: function(val, max) { getCharVal: function (val, max) {
let valStr = val == '' || val == null ? '' : val;
let returnValue = ''; let returnValue = '';
let byteValLen = 0; let byteValLen = 0;
for (let i = 0; i < val.length; i++) { for (let i = 0; i < valStr.length; i++) {
if (val[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 2; if (valStr[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 2;
else byteValLen += 1; else byteValLen += 1;
if (byteValLen > max) break; if (byteValLen > max) break;
returnValue += val[i]; returnValue += valStr[i];
} }
return returnValue; return returnValue;
}, },
/* /**
* 正则校验,校验非负数字 * 正则校验,校验非负数字
*/ */
regPos: function(v) { regPos: function (v) {
let regTest = /^\d+(\.\d+)?$/; let regTest = /^\d+(\.\d+)?$/;
return regTest.test(v); return regTest.test(v);
} }
......
src/components/active-config/active-step.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-18 10:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 14:20:50
-->
<!--
<active-step :activeStep="activeStep" :stepData="stepData" ></active-step>
import activeStep from '@/components/active-config/active-step.vue';
-->
<template>
<div class="active-step-content font-0">
<div
:class="['active-step-cell inline-block border-box', index + 1 == activeStep ? 'active-step' : '', item.hasSet ? 'active-hasset': '']"
v-for="(item, index) in stepData"
:key="index + item.stepName"
:style="{ width: 100 / stepData.length + '%', 'max-width': 100 / stepData.length + '%' }"
>
<div class="active-step-cell_inner border-box">
<div
v-if="index < stepData.length - 1"
class="active-step-cell_line"
></div>
<div class="active-step-cell_title">
<div class="el-step__icon is-text inline-block text-center">
<i
v-if="item.hasSet"
class="el-icon-check font-14 color-1890ff flex flex-pack-center flex-align-center"
></i>
<div
v-else
class="el-step__icon-inner font-14 flex flex-pack-center flex-align-center"
>{{ index + 1 }}</div>
</div>
<div class="active-step-cell_txt p-lr-10 bg-fff inline-block font-16">{{ item.stepName }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'active-step',
props: {
activeStep: {
type: [Number, String],
default() {
return 1;
}
},
stepData: {
type: [Array, Object],
default() {
return []
}
}
},
data() {
return {
/* activeStep: 1,
stepData: [
{
stepName: '基础信息',
hasSet: false
},
{
stepName: '前端配置',
hasSet: false
},
{
stepName: '后端配置',
hasSet: false
},
{
stepName: '定义返回',
hasSet: false
}
], */
}
},
methods: {
},
}
</script>
<style lang="less" scoped>
.active-step-content {
.active-step-cell {
padding: 0 10px;
.bg-fff {
background: #fff;
}
.active-step-cell_inner {
position: relative;
width: 100%;
padding-right: 10px;
.active-step-cell_line {
position: absolute;
height: 1px;
top: 11px;
left: 0;
right: 0;
background: #c0c4cc;
z-index: 0;
}
.active-step-cell_title {
position: relative;
z-index: 1;
.el-step__icon {
border: 1px solid #c0c4cc;
color: #c0c4cc;
.el-step__icon-inner {
width: 22px;
height: 23px;
}
}
.active-step-cell_txt {
position: relative;
z-index: 1;
color: #909399;
}
}
}
&.active-step {
.active-step-cell_inner {
.active-step-cell_line {
background: #1890ff;
}
.active-step-cell_title {
.el-step__icon {
color: #fff;
border-color: #1890ff;
background: #1890ff;
}
.active-step-cell_txt {
color: #303133;
}
}
}
}
&.active-hasset {
.active-step-cell_inner {
.active-step-cell_line {
background: #1890ff;
}
.active-step-cell_title {
.el-step__icon {
color: #fff;
border-color: #1890ff;
background: #1890ff;
}
.el-icon-check {
width: 98%;
height: 98%;
color: #1890ff;
background: #fff;
border-radius: 50%;
}
.active-step-cell_txt {
color: #606266;
}
}
}
}
}
}
</style>
src/components/active-config/base-config.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-18 10:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 15:56:59
-->
<!--
<base-config @submitNext="submitNext"></base-config>
import baseConfig from '@/components/active-config/base-config.vue';
-->
<template>
<div class="base-config-content">
<div class="config-title font-14 color-303133">基本信息</div>
<el-form
label-width="114px"
:model="activeInfoData"
ref="baseForm"
:rules="rules"
>
<el-form-item
label="活动名称："
prop="activeName"
>
<limitInput
:inputWidth="350"
:disflag="$route.query.interfaceId ? true : false"
:inputValue.sync="activeInfoData.activeName"
:holder="'请输入活动名称'"
:getByType="'word'"
:maxLength="30"
> </limitInput>
</el-form-item>
<el-form-item
label="活动有效期："
prop="dateRange"
>
<el-date-picker
class="m-l-10"
prefix-icon="el-icon-time"
v-model="activeInfoData.dateRange"
@change="changeDate"
:editable="false"
:value-format="'yyyy-MM-dd'"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
> </el-date-picker>
</el-form-item>
<el-form-item class="m-t-50">
<el-button
type="primary"
@click="returnBack"
>返回</el-button>
<el-button
type="primary"
@click="submitForm('baseForm')"
>下一步</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
export default {
name: 'base-config',
props: {
},
components: {
limitInput
},
data() {
return {
activeInfoData: {
activeName: '',
dateRange: []
},
rules: {
activeName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
dateRange: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }]
}
}
},
methods: {
/**
* 日期
*/
changeDate(e) {
const that = this;
if (!e) {
that.activeInfoData.dateRange = [];
}
},
/**
* 返回
*/
returnBack() {
this.$router.go(-1);
},
/**
* 下一步
*/
submitForm(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.$emit('submitNext', that.activeInfoData);
that.$store.dispatch('saveBaseInfo', that.activeInfoData);
} else {
return false;
}
});
}
},
}
</script>
<style lang="less" scoped>
.base-config-content {
padding: 48px 0 0 0;
.config-title {
font-weight: 600;
margin-bottom: 30px;
}
.m-t-50 {
margin-top: 50px;
}
.el-form-item {
/deep/ .el-form-item__label {
color: #606266;
}
}
}
</style>
src/components/active-config/card-config.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-18 10:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 17:13:41
-->
<!--
<card-config @submitBack="submitBack" @submitNext="submitNext"></card-config>
import cardConfig from '@/components/active-config/card-config.vue';
-->
<template>
<div class="card-config-content">
<div class="config-title font-14 color-303133">小程序卡片配置</div>
<el-form
label-width="114px"
:model="activeInfoData"
ref="cardForm"
:rules="rules"
>
<el-form-item
label="活动名称："
prop="activeName"
>
<limitInput
:inputWidth="350"
:disflag="$route.query.interfaceId ? true : false"
:inputValue.sync="activeInfoData.activeName"
:holder="'请输入活动名称'"
:getByType="'word'"
:maxLength="30"
> </limitInput>
</el-form-item>
<el-form-item
label="活动有效期："
prop="dateRange"
>
<el-date-picker
class="m-l-10"
prefix-icon="el-icon-time"
v-model="activeInfoData.dateRange"
@change="changeDate"
:editable="false"
:value-format="'yyyy-MM-dd'"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
> </el-date-picker>
</el-form-item>
<el-form-item class="m-t-50">
<el-button
type="primary"
@click="submitBack"
>上一步</el-button>
<el-button
type="primary"
@click="submitForm('cardForm')"
>下一步</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
export default {
name: 'card-config',
props: {
},
components: {
limitInput
},
data() {
return {
activeInfoData: {
activeName: '',
dateRange: []
},
rules: {
activeName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
dateRange: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }]
}
}
},
methods: {
/**
* 日期
*/
changeDate(e) {
const that = this;
if (!e) {
that.activeInfoData.dateRange = [];
}
},
/**
* 上一步
*/
submitBack() {
const that = this;
that.$emit('submitBack');
},
/**
* 下一步
*/
submitForm(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.$emit('submitNext', that.activeInfoData);
that.$store.dispatch('saveCardInfo', that.activeInfoData);
} else {
return false;
}
});
}
},
}
</script>
<style lang="less" scoped>
.card-config-content {
padding: 48px 0 0 0;
.config-title {
font-weight: 600;
margin-bottom: 30px;
}
.m-t-50 {
margin-top: 50px;
}
.el-form-item {
/deep/ .el-form-item__label {
color: #606266;
}
}
}
</style>
src/components/active-config/center-config.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-18 10:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 17:13:33
-->
<!--
<center-config @submitBack="submitBack" @submitNext="submitNext"></center-config>
import centerConfig from '@/components/active-config/center-config.vue';
-->
<template>
<div class="center-config-content">
<div class="config-title font-14 color-303133">活动中心配置</div>
<el-form
label-width="114px"
:model="activeInfoData"
ref="centerForm"
:rules="rules"
>
<el-form-item
label="活动名称："
prop="activeName"
>
<limitInput
:inputWidth="350"
:disflag="$route.query.interfaceId ? true : false"
:inputValue.sync="activeInfoData.activeName"
:holder="'请输入活动名称'"
:getByType="'word'"
:maxLength="30"
> </limitInput>
</el-form-item>
<el-form-item
label="活动有效期："
prop="dateRange"
>
<el-date-picker
class="m-l-10"
prefix-icon="el-icon-time"
v-model="activeInfoData.dateRange"
@change="changeDate"
:editable="false"
:value-format="'yyyy-MM-dd'"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
> </el-date-picker>
</el-form-item>
<el-form-item class="m-t-50">
<el-button
type="primary"
@click="submitBack"
>上一步</el-button>
<el-button
type="primary"
@click="submitForm('centerForm')"
>下一步</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
export default {
name: 'center-config',
props: {
},
components: {
limitInput
},
data() {
return {
activeInfoData: {
activeName: '',
dateRange: []
},
rules: {
activeName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
dateRange: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }]
}
}
},
methods: {
/**
* 日期
*/
changeDate(e) {
const that = this;
if (!e) {
that.activeInfoData.dateRange = [];
}
},
/**
* 上一步
*/
submitBack() {
const that = this;
that.$emit('submitBack');
},
/**
* 下一步
*/
submitForm(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.$emit('submitNext', that.activeInfoData);
that.$store.dispatch('saveCenterInfo', that.activeInfoData);
} else {
return false;
}
});
}
},
}
</script>
<style lang="less" scoped>
.center-config-content {
padding: 48px 0 0 0;
.config-title {
font-weight: 600;
margin-bottom: 30px;
}
.m-t-50 {
margin-top: 50px;
}
.el-form-item {
/deep/ .el-form-item__label {
color: #606266;
}
}
}
</style>
src/components/active-config/poster-config.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-18 10:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 17:11:30
-->
<!--
<poster-config @submitBack="submitBack" @submitNext="submitNext"></poster-config>
import posterConfig from '@/components/active-config/poster-config.vue';
-->
<template>
<div class="poster-config-content">
<div class="config-title font-14 color-303133">分享海报配置</div>
<el-form
label-width="114px"
:model="activeInfoData"
ref="posterForm"
:rules="rules"
>
<el-form-item
label="活动名称："
prop="activeName"
>
<limitInput
:inputWidth="350"
:disflag="$route.query.interfaceId ? true : false"
:inputValue.sync="activeInfoData.activeName"
:holder="'请输入活动名称'"
:getByType="'word'"
:maxLength="30"
> </limitInput>
</el-form-item>
<el-form-item
label="活动有效期："
prop="dateRange"
>
<el-date-picker
class="m-l-10"
prefix-icon="el-icon-time"
v-model="activeInfoData.dateRange"
@change="changeDate"
:editable="false"
:value-format="'yyyy-MM-dd'"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
> </el-date-picker>
</el-form-item>
<el-form-item class="m-t-50">
<el-button
type="primary"
@click="submitBack"
>上一步</el-button>
<el-button
type="primary"
@click="submitForm('posterForm')"
>下一步</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
export default {
name: 'poster-config',
props: {
},
components: {
limitInput
},
data() {
return {
activeInfoData: {
activeName: '',
dateRange: []
},
rules: {
activeName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
dateRange: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }]
}
}
},
methods: {
/**
* 日期
*/
changeDate(e) {
const that = this;
if (!e) {
that.activeInfoData.dateRange = [];
}
},
/**
* 上一步
*/
submitBack() {
const that = this;
that.$emit('submitBack');
},
/**
* 下一步
*/
submitForm(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.$emit('submitNext', that.activeInfoData);
that.$store.dispatch('savePosterInfo', that.activeInfoData);
} else {
return false;
}
});
}
},
}
</script>
<style lang="less" scoped>
.poster-config-content {
padding: 48px 0 0 0;
.config-title {
font-weight: 600;
margin-bottom: 30px;
}
.m-t-50 {
margin-top: 50px;
}
.el-form-item {
/deep/ .el-form-item__label {
color: #606266;
}
}
}
</style>
src/components/active-config/reward-config.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-18 10:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 17:17:10
-->
<!--
<reward-config @submitBack="submitBack" @submitNext="submitNext"></reward-config>
import rewardConfig from '@/components/active-config/reward-config.vue';
-->
<template>
<div class="reward-config-content">
<div class="config-title font-14 color-303133">奖励配置</div>
<el-form
label-width="114px"
:model="activeInfoData"
ref="rewardForm"
:rules="rules"
>
<el-form-item
label="活动名称："
prop="activeName"
>
<limitInput
:inputWidth="350"
:disflag="$route.query.interfaceId ? true : false"
:inputValue.sync="activeInfoData.activeName"
:holder="'请输入活动名称'"
:getByType="'word'"
:maxLength="30"
> </limitInput>
</el-form-item>
<el-form-item
label="活动有效期："
prop="dateRange"
>
<el-date-picker
class="m-l-10"
prefix-icon="el-icon-time"
v-model="activeInfoData.dateRange"
@change="changeDate"
:editable="false"
:value-format="'yyyy-MM-dd'"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
> </el-date-picker>
</el-form-item>
<el-form-item class="m-t-50">
<el-button
type="primary"
@click="submitBack"
>上一步</el-button>
<el-button
type="primary"
@click="submitForm('rewardForm')"
>确认新建</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import { _debounce } from '@/common/js/public';
export default {
name: 'reward-config',
props: {
},
components: {
limitInput
},
data() {
return {
activeInfoData: {
activeName: '',
dateRange: []
},
rules: {
activeName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
dateRange: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }]
}
}
},
methods: {
/**
* 日期
*/
changeDate(e) {
const that = this;
if (!e) {
that.activeInfoData.dateRange = [];
}
},
/**
* 上一步
*/
submitBack() {
const that = this;
that.$store.dispatch('saveRewardInfo', that.activeInfoData);
that.$emit('submitBack');
},
/**
* 下一步
*/
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.$store.dispatch('clearActiveData');
} else {
return false;
}
});
},500),
}
}
</script>
<style lang="less" scoped>
.reward-config-content {
padding: 48px 0 0 0;
.config-title {
font-weight: 600;
margin-bottom: 30px;
}
.m-t-50 {
margin-top: 50px;
}
.el-form-item {
/deep/ .el-form-item__label {
color: #606266;
}
}
}
</style>
src/components/active/data-statistics-child.vue
...@@ -18,30 +18,24 @@ import dataStatisticsChild from '@/components/active/data-statistics-child.vue'; ...@@ -18,30 +18,24 @@ import dataStatisticsChild from '@/components/active/data-statistics-child.vue';
<div class="data-statistics-left"> <div class="data-statistics-left">
<ul class="flex flex-column flex-pack-center flex-align-center"> <ul class="flex flex-column flex-pack-center flex-align-center">
<li class="flex-1 flex flex-pack-center flex-align-center"> <li class="flex-1 flex flex-pack-center flex-align-center">
<div class="data-statistics-icon"><img <div class="data-statistics-icon"><img src="" alt="" /></div>
src=""
alt=""
></div>
<div class="data-statistics-txt flex flex-column"> <div class="data-statistics-txt flex flex-column">
<div class="font-14 color-606266">活动曝光量</div> <div class="font-14 color-606266">活动曝光量</div>
<div class="font-22 color-303133 p-t-10">287,123</div> <div class="font-22 color-303133 p-t-10">287,123</div>
</div> </div>
</li> </li>
<li class="flex-1 flex flex-pack-center flex-align-center"> <li class="flex-1 flex flex-pack-center flex-align-center">
<div class="data-statistics-icon"><img <div class="data-statistics-icon"><img src="" alt="" /></div>
src=""
alt=""
></div>
<div class="data-statistics-txt flex flex-column"> <div class="data-statistics-txt flex flex-column">
<div class="font-14 color-606266">参与人数</div> <div class="font-14 color-606266">参与人数</div>
<div class="font-22 color-303133 p-t-10">287,123</div> <div class="font-22 color-303133 p-t-10">287,123</div>
</div> </div>
</li> </li>
<li class="flex-1 flex flex-pack-center flex-align-center"> <li class="flex-1 flex flex-pack-center flex-align-center">
<div class="data-statistics-icon"><img <div class="data-statistics-icon"><img src="" alt="" /></div>
src=""
alt=""
></div>
<div class="data-statistics-txt flex flex-column"> <div class="data-statistics-txt flex flex-column">
<div class="font-14 color-606266">受邀人数</div> <div class="font-14 color-606266">受邀人数</div>
<div class="font-22 color-303133 p-t-10">287,123</div> <div class="font-22 color-303133 p-t-10">287,123</div>
...@@ -51,31 +45,24 @@ import dataStatisticsChild from '@/components/active/data-statistics-child.vue'; ...@@ -51,31 +45,24 @@ import dataStatisticsChild from '@/components/active/data-statistics-child.vue';
</div> </div>
<div class="data-right-wrap"> <div class="data-right-wrap">
<div class="data-right-top flex"> <div class="data-right-top flex">
<div class="data-statistics-middle border-box m-l-20"> <div class="data-statistics-middle flex-1 border-box m-l-20">
<div class="font-14 color-606266">参与率</div> <div class="font-14 color-606266">参与率</div>
<div class="font-22 color-303133 p-t-5">70%</div> <div class="font-22 color-303133 p-t-5">70%</div>
<div class="data-percentage"> <div class="data-percentage">
<div <div class="data-percentage-inner" :style="{ width: '70%' }"></div>
class="data-percentage-inner"
:style="{'width': '70%'}"
></div>
</div> </div>
</div> </div>
<div class="data-statistics-right border-box m-l-20"> <div class="data-statistics-right flex-1 border-box m-l-20">
<div class="font-14 color-606266">传播系数</div> <div class="font-14 color-606266">传播系数</div>
<div class="font-22 color-303133 p-t-5">4.0</div> <div class="font-22 color-303133 p-t-5">4.0</div>
</div> </div>
</div> </div>
<div class="data-right-bottom"> <div class="data-right-bottom">
<bar-chart <bar-chart :barChartData="barChartData" :charHeight="charHeight"></bar-chart>
:barChartData="barChartData"
:charHeight="charHeight"
></bar-chart>
</div> </div>
<!--<div class="chart-title font-12 color-000 text-center">- 近15天趋势图 -</div>--> <!--<div class="chart-title font-12 color-000 text-center">- 近15天趋势图 -</div>-->
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
...@@ -86,13 +73,12 @@ export default { ...@@ -86,13 +73,12 @@ export default {
barChartData: { barChartData: {
type: [Array, Object], type: [Array, Object],
default() { default() {
return {} return {};
} }
} }
}, },
components: { barChart }, components: { barChart },
data() { data() {
return { return {
charHeight: '220px' charHeight: '220px'
}; };
...@@ -130,6 +116,7 @@ export default { ...@@ -130,6 +116,7 @@ export default {
} }
.data-right-wrap { .data-right-wrap {
width: 100%;
.data-right-bottom { .data-right-bottom {
margin-top: 40px; margin-top: 40px;
} }
...@@ -141,7 +128,7 @@ export default { ...@@ -141,7 +128,7 @@ export default {
.data-statistics-middle { .data-statistics-middle {
position: relative; position: relative;
min-width: 216px; min-width: 216px;
height: 90px; height: 85px;
background: #f3f6f9; background: #f3f6f9;
padding: 10px 20px 0 20px; padding: 10px 20px 0 20px;
.data-percentage { .data-percentage {
...@@ -160,7 +147,7 @@ export default { ...@@ -160,7 +147,7 @@ export default {
.data-statistics-right { .data-statistics-right {
position: relative; position: relative;
min-width: 216px; min-width: 216px;
height: 90px; height: 85px;
padding: 10px 20px 0 20px; padding: 10px 20px 0 20px;
background: #f3f6f9; background: #f3f6f9;
} }
......
src/components/active/funnel-chart.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2019-11-13 16:37:02 * @Date: 2019-11-13 16:37:02
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2019-11-14 14:30:20 * @LastEditTime: 2019-11-15 16:15:50
--> -->
<!-- <!--
<funnel-chart :funnelData="funnelData"></funnel-chart> <funnel-chart :funnelData="funnelData"></funnel-chart>
...@@ -15,7 +15,7 @@ import funnelChart from '@/components/active/funnel-chart.vue'; ...@@ -15,7 +15,7 @@ import funnelChart from '@/components/active/funnel-chart.vue';
<template> <template>
<div class="funnel-chart"> <div class="funnel-chart">
<div class="funnel-chart-body"> <div class="funnel-chart-body flex">
<div class="chart-left"> <div class="chart-left">
<div class="trapezoid-bg"> <div class="trapezoid-bg">
<div class="space-line h-20 r-60"></div> <div class="space-line h-20 r-60"></div>
...@@ -64,7 +64,10 @@ export default { ...@@ -64,7 +64,10 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.funnel-chart { .funnel-chart {
width: 595px; width: 595px;
min-width: 595px;
height: 346px; height: 346px;
padding: 40px 0 0 52px;
margin-left: 38px;
background: rgba(245, 247, 250, 1); background: rgba(245, 247, 250, 1);
&::after { &::after {
overflow: hidden; overflow: hidden;
...@@ -160,7 +163,7 @@ export default { ...@@ -160,7 +163,7 @@ export default {
position: relative; position: relative;
width: 216px; width: 216px;
height: 269px; height: 269px;
float: left; // float: left;
.trapezoid-bg { .trapezoid-bg {
position: relative; position: relative;
width: 216px; width: 216px;
...@@ -196,13 +199,13 @@ export default { ...@@ -196,13 +199,13 @@ export default {
top: 50%; top: 50%;
right: -36%; right: -36%;
width: 81px; width: 81px;
height: 2px; height: 1px;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
// border-top: 1px solid #dcdfe6; // border-top: 1px solid #dcdfe6;
// border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
background: #dcdfe6; // background: #dcdfe6;
z-index: 1; z-index: 1;
} }
&.r-60 { &.r-60 {
...@@ -236,7 +239,7 @@ export default { ...@@ -236,7 +239,7 @@ export default {
.chart-right { .chart-right {
position: relative; position: relative;
width: 327px; width: 327px;
float: left; // float: left;
.chart-text { .chart-text {
position: relative; position: relative;
width: 327px; width: 327px;
......
src/components/active/out-date-active.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-15 10:10:08
* @LastEditors: 无尘
* @LastEditTime: 2019-11-15 11:46:16
-->
<!--
<out-date-active :barChartData="barChartData" :funnelData="funnelData"></out-date-active>
import outDateActive from '@/components/active/out-date-active.vue';
-->
<template>
<div class="out-date-active flex flex-space-between">
<data-statistics-child :barChartData="barChartData"></data-statistics-child>
<funnel-chart :funnelData="funnelData"></funnel-chart>
</div>
</template>
<script>
import dataStatisticsChild from '@/components/active/data-statistics-child.vue';
import funnelChart from '@/components/active/funnel-chart.vue';
export default {
name: 'card-table',
props: {
barChartData: {
type: [Array, Object],
default() {
return {}
}
},
funnelData: {
type: [Array, Object],
default() {
return {}
}
}
},
components: {
funnelChart,
dataStatisticsChild
},
data() {
return {
}
},
methods: {
},
}
</script>
<style lang="less" scoped>
.out-date-active {
width: 100%;
}
</style>
src/components/data-details/card-log.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-15 10:10:08
* @LastEditors: 无尘
* @LastEditTime: 2019-11-15 11:46:16
-->
<!--
<card-log></card-log>
import cardLog from '@/components/data-details/card-log.vue';
-->
<template>
<div class="card-log">
<el-table
class="select-table"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
:style="{ width: '100%', minHeight: tableH }"
>
<el-table-column
prop=""
label="奖励时间"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
</el-table-column>
<el-table-column
prop=""
label="奖励来源"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.phoneNumber || '--' }}</template>
</el-table-column>
<el-table-column
label="受邀人信息"
show-overflow-tooltip
>
<template slot-scope="scope">
<div class="cell">
<img
src=""
alt=""
/>><span class="font-14 color-606266">{{ scope.row.name || '--' }}</span>
</div>
</template>
</el-table-column>
<el-table-column
prop=""
label="奖励内容"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
</el-table-column>
</el-table>
<div
class="block common-wrap__page text-right m-t-24"
v-if="tableData.length != 0"
>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 40, 60, 80]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
> </el-pagination>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
name: 'card-log',
data() {
return {
// 分页参数
tableData: [],
currentPage: 1,
pageSize: 20,
total: 0,
}
},
methods: {
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList() {
const that = this;
let para = {
brandId: that.activeBrand
};
getRequest('/haoban-app-member-web/customer/find_message_list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
}
</script>
<style lang="less" scoped>
.card-log {
width: 100%;
}
</style>
src/components/data-details/invite-log.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-15 10:10:08
* @LastEditors: 无尘
* @LastEditTime: 2019-11-15 11:46:16
-->
<!--
<invite-log></invite-log>
import inviteLog from '@/components/data-details/invite-log.vue';
-->
<template>
<div class="invite-log">
<el-table
class="select-table"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
:style="{ width: '100%', minHeight: tableH }"
>
<el-table-column
label="受邀人信息"
show-overflow-tooltip
>
<template slot-scope="scope">
<div class="cell">
<img
src=""
alt=""
/>><span class="font-14 color-606266">{{ scope.row.name || '--' }}</span>
</div>
</template>
</el-table-column>
<el-table-column
prop=""
label="受邀时间"
show-overflow-tooltip
sortable
>
<template slot-scope="scope">{{ scope.row.phoneNumber || '--' }}</template>
</el-table-column>
<el-table-column
prop=""
label="转化进度"
show-overflow-tooltip
sortable
>
<template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
</el-table-column>
</el-table>
<div
class="block common-wrap__page text-right m-t-24"
v-if="tableData.length != 0"
>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 40, 60, 80]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
> </el-pagination>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
name: 'invite-log',
data() {
return {
// 分页参数
tableData: [],
currentPage: 1,
pageSize: 20,
total: 0,
}
},
methods: {
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList() {
const that = this;
let para = {
brandId: that.activeBrand
};
getRequest('/haoban-app-member-web/customer/find_message_list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
}
</script>
<style lang="less" scoped>
.invite-log {
width: 100%;
}
</style>
src/components/data-details/invite-table.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-15 10:10:08
* @LastEditors: 无尘
* @LastEditTime: 2019-11-15 11:46:16
-->
<!--
<invite-table></invite-table>
import inviteTable from '@/components/data-details/invite-table.vue';
-->
<template>
<div class="invite-table">
<el-table
class="select-table"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
:style="{ width: '100%'}"
>
<el-table-column
label="邀请人信息"
show-overflow-tooltip
>
<template slot-scope="scope">
<div class="cell">
<img
src=""
alt=""
/>><span class="font-14 color-606266">{{ scope.row.name || '--' }}</span>
</div>
</template>
</el-table-column>
<el-table-column
prop=""
label="参与时间"
show-overflow-tooltip
sortable
>
<template slot-scope="scope">{{ scope.row.phoneNumber || '--' }}</template>
</el-table-column>
<el-table-column
prop=""
label="邀请人数"
show-overflow-tooltip
sortable
>
<template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
</el-table-column>
<el-table-column
prop=""
label="积分收益"
show-overflow-tooltip
sortable
>
<template slot-scope="scope">{{ scope.row.code || '--' }}</template>
</el-table-column>
<el-table-column
prop=""
label="卡券收益"
show-overflow-tooltip
sortable
>
<template slot-scope="scope">{{ scope.row.messageCount }}</template>
</el-table-column>
</el-table>
<div
class="block common-wrap__page text-right m-t-24"
v-if="tableData.length != 0"
>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 40, 60, 80]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
> </el-pagination>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
name: 'invite-table',
data() {
return {
// 分页参数
tableData: [],
currentPage: 1,
pageSize: 20,
total: 0,
}
},
methods: {
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList() {
const that = this;
let para = {
brandId: that.activeBrand
};
getRequest('/haoban-app-member-web/customer/find_message_list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
}
</script>
<style lang="less" scoped>
.invite-table {
width: 100%;
}
</style>
src/components/data-details/invited-table.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-15 10:10:08
* @LastEditors: 无尘
* @LastEditTime: 2019-11-15 11:45:16
-->
<!--
<invited-table :funnelData="funnelData"></invited-table>
import invitedTable from '@/components/data-details/invited-table.vue';
-->
<template>
<div class="invited-table">
<el-table
class="select-table"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
:style="{ width: '100%'}"
>
<el-table-column
label="受邀人信息"
show-overflow-tooltip
>
<template slot-scope="scope">
<div class="cell">
<img
src=""
alt=""
/>><span class="font-14 color-606266">{{ scope.row.name || '--' }}</span>
</div>
</template>
</el-table-column>
<el-table-column
prop=""
label="受邀时间"
show-overflow-tooltip
sortable
>
<template slot-scope="scope">{{ scope.row.phoneNumber || '--' }}</template>
</el-table-column>
<el-table-column
label="邀请人信息"
show-overflow-tooltip
>
<template slot-scope="scope">
<div class="cell">
<img
src=""
alt=""
/>><span class="font-14 color-606266">{{ scope.row.name || '--' }}</span>
</div>
</template>
</el-table-column>
<el-table-column
prop=""
label="转化进度"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
</el-table-column>
</el-table>
<div
class="block common-wrap__page text-right m-t-24"
v-if="tableData.length != 0"
>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 40, 60, 80]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
> </el-pagination>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
name: 'invited-table',
data() {
return {
// 分页参数
tableData: [],
currentPage: 1,
pageSize: 20,
total: 0,
}
},
methods: {
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList() {
const that = this;
let para = {
brandId: that.activeBrand
};
getRequest('/haoban-app-member-web/customer/find_message_list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
}
</script>
<style lang="less" scoped>
.invited-table {
width: 100%;
}
</style>
src/components/data-details/point-log.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-15 10:10:08
* @LastEditors: 无尘
* @LastEditTime: 2019-11-15 11:46:16
-->
<!--
<point-log></point-log>
import pointLog from '@/components/data-details/point-log.vue';
-->
<template>
<div class="point-log">
<el-table
class="select-table"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
:style="{ width: '100%', minHeight: tableH }"
>
<el-table-column
prop=""
label="奖励时间"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.phoneNumber || '--' }}</template>
</el-table-column>
<el-table-column
prop=""
label="奖励来源"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
</el-table-column>
<el-table-column
label="受邀人信息"
show-overflow-tooltip
>
<template slot-scope="scope">
<div class="cell">
<img
src=""
alt=""
/>><span class="font-14 color-606266">{{ scope.row.name || '--' }}</span>
</div>
</template>
</el-table-column>
<el-table-column
prop=""
label="奖励额度"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
</el-table-column>
</el-table>
<div
class="block common-wrap__page text-right m-t-24"
v-if="tableData.length != 0"
>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 40, 60, 80]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
> </el-pagination>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
name: 'point-log',
data() {
return {
// 分页参数
tableData: [],
currentPage: 1,
pageSize: 20,
total: 0,
}
},
methods: {
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList() {
const that = this;
let para = {
brandId: that.activeBrand
};
getRequest('/haoban-app-member-web/customer/find_message_list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
}
</script>
<style lang="less" scoped>
.point-log {
width: 100%;
}
</style>
src/components/limit-input.vue 0 → 100644
<!--
限制输入框组件
<limitInput
:inputWidth="500"
:limitClass="'limit-color'"
:disflag='!childItem.fieldEdited'
:inputValue.sync="ruleForm.addressDetail"
:holder="'请输入详细地址'"
:getByType="'word'"
:maxLength="40">
</limitInput>
-->
<template>
<div
:class="['input-line-cell', limitClass]"
:style="{ width: inputWidth + 'px' }"
>
<el-input
:style="{ width: inputWidth + 'px' }"
v-model="itemValue"
:disabled="disflag"
:placeholder="holder"
@blur="inputBlur()"
@focus="inputFocus()"
@keyup.native="value => toInput(value)"
> </el-input>
<span class="tip"><span class="len_span">{{ inputNum }}</span>/{{ limitLength }}</span>
</div>
</template>
<script>
import strLength from '@/common/js/strlen';
export default {
name: 'limitinput',
props: {
// 传入 input value
inputValue: {
type: [String, Number],
default() {
return '';
}
},
// 限制长度
maxLength: {
type: Number,
default: 10
},
// input 长度
inputWidth: {
type: Number,
default: 500
},
// 字或字符判断类型
getByType: {
type: String,
default: 'word' // word: 字, char: 字符
},
holder: {
type: String,
default: '请输入'
},
disflag: {
type: Boolean,
default: false
},
limitClass: {
type: String,
default: ''
}
},
data() {
return {
inputNum: 0,
limitLength: 10,
itemValue: ''
};
},
methods: {
/* eslint-disable */
inputFocus(num) {},
// 输入
toInput: function(value) {
const that = this;
let temp = '';
if (that.getByType == 'word') {
temp = strLength.getByteVal(value.target.value, that.limitLength);
that.itemValue = temp.trim();
that.inputNum = strLength.getZhLen(that.itemValue);
} else {
temp = strLength.getCharVal(value.target.value, that.limitLength);
that.itemValue = temp.trim();
that.inputNum = strLength.getByteLen(that.itemValue);
}
that.$emit('update:inputValue', that.itemValue);
},
inputBlur() {
const that = this;
that.$emit('update:inputValue', that.itemValue);
}
},
watch: {
maxLength: function(newData, oldData) {
const that = this;
that.limitLength = newData;
},
inputValue: function(newData, oldData) {
let that = this;
that.itemValue = newData || '';
if (that.getByType == 'word') {
that.inputNum = strLength.getZhLen(that.itemValue);
} else {
that.inputNum = strLength.getByteLen(that.itemValue);
}
}
},
/* 接收数据 */
mounted() {
let that = this;
that.limitLength = that.maxLength;
that.itemValue = that.inputValue || '';
if (that.getByType == 'word') {
that.inputNum = strLength.getZhLen(that.inputValue);
} else {
that.inputNum = strLength.getByteLen(that.inputValue);
}
}
};
</script>
<style lang="less" scoped>
.input-line-cell {
position: relative;
display: inline-block;
&.limit-color {
.tip {
color: rgba(255, 255, 255, 0.7);
}
}
}
.w-340 {
width: 340px;
/deep/ .el-input__inner {
font-size: 14px;
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
}
}
.el-input {
/deep/ .el-input__inner {
font-size: 14px;
color: #606266;
background-color: rgba(255, 255, 255, 0.1);
}
&.is-disabled {
opacity: 0.5;
}
.is-disabled {
/deep/ .el-input__inner {
font-size: 14px;
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
}
}
}
.tip {
position: absolute;
top: 2px;
right: 10px;
display: inline-block;
line-height: 32px;
text-align: right;
font-size: 12px;
color: #c0c4cc;
}
</style>
src/components/limit-textarea.vue 0 → 100644
<!--
限制文本框组件
<limit-textarea
:inputWidth="500"
:inputValue.sync="ruleForm.addressDetail"
:holder="'请输入详细地址'"
:getByType="'word'"
:disInput=""
:maxLength="40">
</limit-textarea>
-->
<template>
<div
class="input-line-cell"
:style="{ width: inputWidth + 'px' }"
>
<el-input
:style="{ width: inputWidth + 'px' }"
v-model="itemValue"
:placeholder="holder"
type="textarea"
:rows="3"
:disabled="disInput"
@blur="inputBlur()"
@focus="inputFocus()"
@keyup.native="value => toInput(value)"
> </el-input>
<span class="tip"><span class="len_span">{{ inputNum }}</span>/{{ limitLength }}</span>
</div>
</template>
<script>
import strLength from '@/common/js/strlen';
export default {
name: 'limittextarea',
props: {
inputValue: {
// 传入 input value
type: String,
default: ''
},
maxLength: {
// 限制长度
type: Number,
default: 10
},
inputWidth: {
// input 长度
type: Number,
default: 500
},
getByType: {
// 字或字符判断类型
type: String,
default: 'word' // word: 字, char: 字符
},
holder: {
type: String,
default: '请输入'
},
disInput: {
type: Boolean,
default: false
}
},
data() {
return {
inputNum: 0,
limitLength: 10,
itemValue: ''
};
},
methods: {
/* eslint-disable */
inputFocus(num) {},
// 输入
toInput: function(value) {
const that = this;
let temp = '';
if (that.getByType == 'word') {
temp = strLength.getByteVal(value.target.value, that.limitLength);
that.itemValue = temp.trim();
that.inputNum = strLength.getZhLen(that.itemValue);
} else {
temp = strLength.getCharVal(value.target.value, that.limitLength);
that.itemValue = temp.trim();
that.inputNum = strLength.getByteLen(that.itemValue);
}
that.$emit('update:inputValue', that.itemValue);
},
inputBlur() {
const that = this;
that.$emit('update:inputValue', that.itemValue);
}
},
watch: {
maxLength: function(newData, oldData) {
const that = this;
that.limitLength = newData;
},
inputValue: function(newData, oldData) {
const that = this;
that.itemValue = newData;
if (that.getByType == 'word') {
that.inputNum = strLength.getZhLen(that.itemValue);
}else {
that.inputNum = strLength.getByteLen(that.itemValue);
}
}
},
/* 接收数据 */
mounted() {
const that = this;
that.limitLength = that.maxLength;
that.itemValue = that.inputValue || '';
if (that.getByType == 'word') {
that.inputNum = strLength.getZhLen(that.inputValue);
}else {
that.inputNum = strLength.getByteLen(that.inputValue);
}
}
};
</script>
<style lang="less" scoped>
.input-line-cell {
position: relative;
display: inline-block;
}
.w-340 {
width: 340px;
/deep/ .el-input__inner {
font-size: 14px;
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
}
}
.el-textarea {
/deep/ .el-textarea__inner {
font-size: 14px;
color: #606266;
background-color: rgba(255, 255, 255, 0.1);
resize: none;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif;
}
&.is-disabled {
opacity: 0.5;
}
}
.el-input {
.is-disabled {
/deep/ .el-input__inner {
font-size: 14px;
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
}
}
}
.tip {
position: absolute;
bottom: -4px;
right: 10px;
display: inline-block;
line-height: 32px;
text-align: right;
font-size: 12px;
color: #c0c4cc;
}
</style>
src/router/index.js
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2019-11-12 10:18:30 * @Date: 2019-11-12 10:18:30
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2019-11-12 11:25:42 * @LastEditTime: 2019-11-18 11:23:30
*/ */
// import Vue from 'vue'; // import Vue from 'vue';
import Router from 'vue-router'; import Router from 'vue-router';
...@@ -32,45 +32,91 @@ const errorPage = r => { ...@@ -32,45 +32,91 @@ const errorPage = r => {
}); });
}; };
export const constantRouterMap = [ export const constantRouterMap = [{
{ path: '/',
path: '/', name: 'index',
name: 'index', redirect: 'shareIndex',
redirect: 'shareIndex', component: _import('index', 'index'),
component: _import('index', 'index'), children: [
children: [ // 分享首页
// 分享首页 {
{ path: '/shareIndex',
path: '/shareIndex', name: '分享首页',
name: '分享首页', component: _import('shareIndex', 'index'),
component: _import('shareIndex', 'index'), meta: {
meta: { title: '分享首页'
title: '分享首页'
}
} }
] },
}, {
{ path: '/createActive',
path: '/403', name: '创建完成',
name: '无权访问', component: _import('activeConfig', 'index'),
component: errorPage meta: {
}, title: '创建完成'
{ }
path: '/404', },
name: 'error404', // 活动创建完成
component: errorPage {
}, path: '/createCompletion',
{ name: '创建完成',
path: '/500', component: _import('activeConfig', 'createCompletion'),
name: 'error500', meta: {
component: errorPage title: '创建完成'
}, }
{ path: '*', redirect: '/404', hidden: true } },
{
path: '/dataDetail',
name: '数据明细',
component: _import('dataDetails', 'index'),
meta: {
title: '数据明细'
}
},
{
path: '/inviterLog',
name: '邀请人日志',
component: _import('dataDetails', 'inviterLog'),
meta: {
title: '邀请人日志'
}
},
{
path: '/invitedLog',
name: '受邀人日志',
component: _import('dataDetails', 'invitedLog'),
meta: {
title: '受邀人日志'
}
},
]
},
{
path: '/403',
name: '无权访问',
component: errorPage
},
{
path: '/404',
name: 'error404',
component: errorPage
},
{
path: '/500',
name: 'error500',
component: errorPage
},
{
path: '*',
redirect: '/404',
hidden: true
}
]; ];
export default new Router({ export default new Router({
mode: 'history', mode: 'history',
base: '/share-config/', base: '/share-config/',
routes: constantRouterMap, routes: constantRouterMap,
scrollBehavior: () => ({ y: 0 }) scrollBehavior: () => ({
y: 0
})
}); });
src/store/store.js
/*
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-12 10:18:30
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 17:16:49
*/
import Vuex from 'vuex'; import Vuex from 'vuex';
import Vue from 'vue'; import Vue from 'vue';
import * as types from './types'; import * as types from './types';
...@@ -10,7 +18,13 @@ export default new Vuex.Store({ ...@@ -10,7 +18,13 @@ export default new Vuex.Store({
title: '', title: '',
show: false, show: false,
tagRealName: '', tagRealName: '',
uniqueId: '' uniqueId: '',
baseInfo: {}, // 基础信息
centerInfo: {}, // 活动中心配置
cardInfo: {}, // 小程序卡片配置
posterInfo: {}, // 海报配置
rewardInfo: {}, // 奖励配置
tempBackData: [] // 后端判断禁用数据
}, },
mutations: { mutations: {
[types.LOGIN]: (state, data) => { [types.LOGIN]: (state, data) => {
...@@ -32,6 +46,48 @@ export default new Vuex.Store({ ...@@ -32,6 +46,48 @@ export default new Vuex.Store({
}, },
['changeUniqueId'](state, id) { ['changeUniqueId'](state, id) {
state.uniqueId = id || ''; state.uniqueId = id || '';
},
saveBase: (state, data) => {
state.baseInfo = data;
},
saveCenter: (state, data) => {
state.centerInfo = data;
},
saveCard: (state, data) => {
state.cardInfo = data;
},
savePoster: (state, data) => {
state.posterInfo = data;
},
saveReward: (state, data) => {
state.rewardInfo = data;
},
clearData: state => {
state.baseInfo = {};
state.centerInfo = {};
state.cardInfo = {};
state.posterInfo = {};
state.rewardInfo = {};
}
},
actions: {
saveBaseInfo(context, data) {
context.commit('saveBase', data);
},
saveCenterInfo(context, data) {
context.commit('saveCenter', data);
},
saveCardInfo(context, data) {
context.commit('saveCard', data);
},
savePosterInfo(context, data) {
context.commit('savePoster', data);
},
saveRewardInfo(context, data) {
context.commit('saveReward', data);
},
clearActiveData(context, data) {
context.commit('clearData');
} }
} }
}); });
src/view/activeConfig/createCompletion.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-15 10:10:08
* @LastEditors: 无尘
* @LastEditTime: 2019-11-15 16:07:29
-->
<template>
<div class="create-completion common-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content border-box">
<div class="right-box border-box">
<div class="create-completion-icon text-center">
<img
src=""
alt=""
>
</div>
<div class="create-completion-text font-16 color-606266 text-center">活动创建成功！</div>
<div class="create-completion-btn text-center">
<el-button
class="copy-tag"
@click="copyPath"
>复制活动路径</el-button>
<el-button
type="primary"
@click="toActiveList"
>返回活动列表</el-button>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import Clipboard from 'clipboard';
import showMsg from '@/common/js/showmsg';
export default {
name: 'createCompletion',
components: {
navCrumb,
},
data() {
return {
// 面包屑参数
navpath: [
{
name: '分享有礼',
path: `/shareIndex`,
/*relocation: true */
},
{
name: '新建活动',
/*relocation: true */
},
],
}
},
methods: {
copyPath() {
let clipboard = new Clipboard('.copy-tag', {
text: function() {
return `${window.location.origin}`;
}
});
clipboard.on('success', e => {
showMsg.showmsg('复制成功!', 'success');
// 释放内存
clipboard.destroy();
});
clipboard.on('error', e => {
// 不支持复制
showMsg.showmsg('该浏览器不支持复制!', 'warning');
// 释放内存
clipboard.destroy();
});
},
toActiveList() {
this.$router.push(`/shareIndex`);
}
},
}
</script>
<style lang="less" scoped>
.create-completion {
width: 100%;
.create-completion-icon {
padding-top: 159px;
img {
width: 88px;
height: 88px;
}
}
.create-completion-text {
margin-top: 18px;
}
.create-completion-btn {
margin-top: 45px;
}
}
</style>
src/view/activeConfig/index.vue
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-15 10:10:08
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 17:08:56
-->
<template>
<div class="create-completion common-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content border-box">
<div class="right-box border-box">
<div class="step-top">
<active-step
:activeStep="activeStep"
:stepData="stepData"
></active-step>
</div>
<div class="step-body">
<base-config
v-if="activeStep == '1'"
@submitNext="submitNext"
></base-config>
<center-config
v-if="activeStep == '2'"
@submitBack="submitBack"
@submitNext="submitNext"
></center-config>
<card-config
v-if="activeStep == '3'"
@submitBack="submitBack"
@submitNext="submitNext"
></card-config>
<poster-config
v-if="activeStep == '4'"
@submitBack="submitBack"
@submitNext="submitNext"
></poster-config>
<reward-config
v-if="activeStep == '5'"
@submitBack="submitBack"
@submitNext="submitNext"
></reward-config>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import activeStep from '@/components/active-config/active-step.vue';
import baseConfig from '@/components/active-config/base-config.vue';
import centerConfig from '@/components/active-config/center-config.vue';
import cardConfig from '@/components/active-config/card-config.vue';
import posterConfig from '@/components/active-config/poster-config.vue';
import rewardConfig from '@/components/active-config/reward-config.vue';
export default {
name: 'createCompletion',
components: {
navCrumb,
activeStep,
baseConfig,
centerConfig,
cardConfig,
posterConfig,
rewardConfig
},
data() {
return {
// 面包屑参数
navpath: [
{
name: '分享有礼',
path: `/shareIndex`,
/*relocation: true */
},
{
name: '新建活动',
/*relocation: true */
},
],
activeStep: 1,
stepData: [
{
stepName: '基本信息',
hasSet: false
},
{
stepName: '活动中心配置',
hasSet: false
},
{
stepName: '小程序卡片配置',
hasSet: false
},
{
stepName: '分享海报配置',
hasSet: false
},
{
stepName: '奖励配置',
hasSet: false
}
],
}
},
methods: {
/**
* 下一步
*/
submitNext() {
const that = this;
that.stepData[that.activeStep - 1 ].hasSet = true;
that.activeStep++;
},
/**
* 上一步
*/
submitBack() {
const that = this;
console.log(that.activeStep)
that.activeStep--;
that.stepData[that.activeStep - 1 ].hasSet = false;
}
},
}
</script>
<style lang="less" scoped>
.create-completion {
width: 100%;
.create-completion-icon {
padding-top: 159px;
img {
width: 88px;
height: 88px;
}
}
.create-completion-text {
margin-top: 18px;
}
.create-completion-btn {
margin-top: 45px;
}
}
</style>
src/view/dataDetails/index.vue
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-15 10:10:08
* @LastEditors: 无尘
* @LastEditTime: 2019-11-15 13:58:13
-->
<template>
<div class="data-detail common-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content border-box">
<div class="right-box border-box">
<div class="data-detail-tab flex flex-space-between">
<div class="data-detail-radios">
<el-radio-group
v-model="tabName"
style="margin-bottom: 30px;"
>
<el-radio-button label="invite">邀请人列表</el-radio-button>
<el-radio-button label="invited">受邀人列表</el-radio-button>
</el-radio-group>
</div>
<div class="data-detail-export">
<el-button
type="primary"
icon="el-icon-upload"
>导出数据</el-button>
</div>
</div>
<div class="data-detail-table">
<invite-table v-if="tabName == 'invite'"></invite-table>
<invited-table v-if="tabName == 'invited'"></invited-table>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import inviteTable from '@/components/data-details/invite-table.vue';
import invitedTable from '@/components/data-details/invited-table.vue';
// import showMsg from '@/common/js/showmsg';
export default {
name: 'dataDetail',
components: {
navCrumb,
inviteTable,
invitedTable
},
data() {
return {
tabName: 'invite',
// 面包屑参数
navpath: [
{
name: '分享有礼',
path: `/shareIndex`,
/*relocation: true */
},
{
name: '数据明细',
/*relocation: true */
},
],
}
},
methods: {
},
}
</script>
<style lang="less" scoped>
.data-detail {
width: 100%;
.data-detail-tab {
width: 100%;
height: 32px;
}
.data-detail-table {
margin-top: 20px;
}
}
</style>
src/view/dataDetails/invitedLog.vue
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-12 11:02:27
* @LastEditors: 无尘
* @LastEditTime: 2019-11-15 13:36:56
-->
<template>
<div class="invited-log common-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content border-box">
<div class="right-box border-box">
<div class="invited-data">
<div class="invited-data-img flex flex-align-center flex-pack-center"><img
src=""
alt=""
></div>
<div class="invited-data-name text-center font-14 color-606266">-123-</div>
</div>
<div class="invited-log-table">
<el-table
class="select-table"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
:style="{ width: '100%'}"
>
<el-table-column
prop=""
label="操作时间"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.phoneNumber || '--' }}</template>
</el-table-column>
<el-table-column
prop=""
label="转化进度"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
</el-table-column>
<el-table-column
prop=""
label="详情"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
</el-table-column>
</el-table>
<!-- <div
class="block common-wrap__page text-right m-t-24"
v-if="tableData.length != 0"
>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 40, 60, 80]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
> </el-pagination>
</div> -->
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
name: 'invited-log',
components: {
navCrumb,
},
data() {
return {
// 面包屑参数
navpath: [
{
name: '分享有礼',
path: `/shareIndex`,
/*relocation: true */
},
{
name: '受邀人日志',
/*relocation: true */
},
],
tabName: "invite",
// 分页参数
tableData: [],
currentPage: 1,
pageSize: 20,
total: 0,
}
},
methods: {
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getInvitedData() {
const that = this;
let para = {
brandId: that.activeBrand
};
getRequest('/haoban-app-member-web/customer/find_message_list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
}
</script>
<style lang="less" scoped>
.invited-log {
width: 100%;
.invited-data {
width: 100%;
height: 290px;
.invited-data-img {
width: 100px;
height: 100px;
margin: 0 auto;
img {
max-width: 100px;
max-height: 100px;
}
}
.invited-data-name {
margin-top: 10px;
}
}
}
</style>
src/view/dataDetails/inviterLog.vue
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-12 11:02:27
* @LastEditors: 无尘
* @LastEditTime: 2019-11-15 14:06:02
-->
<template>
<div class="inviter-log common-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content border-box">
<div class="right-box border-box">
<div class="inviter-data">
<div class="inviter-data-img flex flex-align-center flex-pack-center"><img
src=""
alt=""
></div>
<div class="inviter-data-name text-center font-14 color-606266">-123-</div>
<div class="inviter-data-datas">
<ul class="inviter-data-wrap flex">
<li class="flex-1">
<div class="font-14 color-606266">邀请人数</div>
<div class="font-20 color-303133 m-t-10">20</div>
</li>
<li class="flex-1">
<div class="font-14 color-606266">积分收益</div>
<div class="font-20 color-303133 m-t-10">20</div>
</li>
<li class="flex-1">
<div class="font-14 color-606266">卡券收益</div>
<div class="font-20 color-303133 m-t-10">20</div>
</li>
</ul>
</div>
</div>
<div class="inviter-log-tab flex flex-space-between">
<div class="data-detail-radios">
<el-radio-group
v-model="tabName"
style="margin-bottom: 30px;"
>
<el-radio-button label="invite">邀请日志</el-radio-button>
<el-radio-button label="point">积分收益明细</el-radio-button>
<el-radio-button label="card">卡券收益明细</el-radio-button>
</el-radio-group>
</div>
<div class="data-detail-export">
<el-button
type="primary"
icon="el-icon-upload"
>导出数据</el-button>
</div>
</div>
<div class="inviter-log-tables m-t-20">
<invite-log v-if="tabName == 'invite'"></invite-log>
<point-log v-if="tabName == 'point'"></point-log>
<card-log v-if="tabName == 'card'"></card-log>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import pointLog from '@/components/data-details/point-log.vue';
import cardLog from '@/components/data-details/card-log.vue';
import inviteLog from '@/components/data-details/invite-log.vue';
import navCrumb from '@/components/nav/nav.vue';
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
name: 'invite-table',
data() {
return {
tabName: "invite",
// 面包屑参数
navpath: [
{
name: '分享有礼',
path: `/shareIndex`,
/*relocation: true */
},
{
name: '邀请人日志',
/*relocation: true */
},
],
}
},
components: {
navCrumb,
inviteLog,
pointLog,
cardLog
},
methods: {
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getInviterData() {
const that = this;
let para = {
brandId: that.activeBrand
};
getRequest('/haoban-app-member-web/customer/find_message_list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
}
</script>
<style lang="less" scoped>
.inviter-log {
width: 100%;
.inviter-data {
width: 100%;
height: 290px;
.inviter-data-img {
width: 100px;
height: 100px;
margin: 0 auto;
img {
max-width: 100px;
max-height: 100px;
}
}
.inviter-data-name {
margin-top: 10px;
}
.inviter-data-datas {
width: 100%;
.inviter-data-wrap {
width: 50%;
margin: 27px auto 0 auto;
li {
width: 33.333333%;
padding-left: 14%;
}
}
}
}
.inviter-log-tab {
height: 32px;
}
}
</style>
src/view/index/index.vue
...@@ -107,45 +107,27 @@ export default { ...@@ -107,45 +107,27 @@ export default {
.right-content { .right-content {
width: 100%; width: 100%;
padding: 24px; padding: 20px;
min-height: 615px; min-height: 615px;
} }
&.near-store-contain {
.right-content {
min-height: 570px;
}
}
/deep/ .el-tabs__nav { /deep/ .el-tabs__nav {
z-index: 1; z-index: 1;
} }
} }
.content-body .left-menu {
-ms-flex: 0 0 200px;
flex: 0 0 200px;
width: 200px;
height: 100%;
background: #020b21;
transition: all 0.2s ease;
position: fixed;
z-index: 5;
}
.common-wrap { .common-wrap {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
.right-content { .right-content {
/*width: 100%;*/ /*width: 100%;*/
padding: 24px; padding: 20px;
min-height: calc(100% - 240px); min-height: calc(100vh - 256px);
.right-box { .right-box {
padding: 20px;
min-height: calc(100vh - 296px);
background: #fff; background: #fff;
padding: 24px;
} }
} }
} }
...@@ -160,6 +142,7 @@ export default { ...@@ -160,6 +142,7 @@ export default {
/* 表格为空 */ /* 表格为空 */
/deep/ .el-table__empty-block { /deep/ .el-table__empty-block {
height: 256px; height: 256px;
padding: 80px;
} }
} }
...@@ -169,7 +152,7 @@ export default { ...@@ -169,7 +152,7 @@ export default {
.el-table__empty-text { .el-table__empty-text {
width: auto; width: auto;
margin-bottom: 80px; margin-bottom: 0px;
&::before { &::before {
content: ' '; content: ' ';
display: block; display: block;
......
src/view/shareIndex/index.vue
...@@ -4,30 +4,86 @@ ...@@ -4,30 +4,86 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2019-11-12 10:59:45 * @Date: 2019-11-12 10:59:45
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2019-11-14 17:32:00 * @LastEditTime: 2019-11-18 18:23:39
--> -->
<template> <template>
<div class="share-index"> <div class="share-index common-wrap">
<data-statistics-child :barChartData="barChartData"></data-statistics-child> <div class="right-content border-box">
<funnel-chart :funnelData="funnelData"></funnel-chart> <div class="right-box border-box">
<bar-chart <data-statistics-child :barChartData="barChartData"></data-statistics-child>
:barChartData="barChartData" <funnel-chart :funnelData="funnelData"></funnel-chart>
:charHeight="charHeight" <bar-chart
></bar-chart> :barChartData="barChartData"
<data-statistics></data-statistics> :charHeight="charHeight"
></bar-chart>
<data-statistics
:barChartData="barChartData"
:funnelData="funnelData"
></data-statistics>
<out-date-active
:barChartData="barChartData"
:funnelData="funnelData"
></out-date-active>
<div class="separator-space">- 以下为已结束活动 - </div>
<div class="finished-active border-box">
<ul>
<template v-for="(item, index) in finishedData">
<li
:class="[selectItem]"
@click.stop="selectLi(item)"
:key="index+'data'"
>
<div class="finished-active-title flex flex-space-between">
<div class="active-title-left">
<div class="active-title-name font-18 color-303133">活动名称活动名称活动名称活动名称活动名称活动名称</div>
<div class="active-title-date font-14 color-909399 m-t-5">2019.10.01 12:00 - 2019.10.02 12:00</div>
</div>
<div class="active-title-right">
<el-button
type="primary"
plain
>活动配置</el-button>
<el-button
type="primary"
plain
@click="handleCopy(index, item)"
>复制路径</el-button>
<el-button
type="primary"
plain
>数据明细</el-button>
</div>
</div>
<div
v-if="selectItem == item.id"
class="finished-active-body"
>
<out-date-active
:barChartData="barChartData"
:funnelData="funnelData"
></out-date-active>
</div>
</li>
</template>
</ul>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div> </div>
</template> </template>
<script> <script>
import outDateActive from '@/components/active/out-date-active.vue';
import dataStatisticsChild from '@/components/active/data-statistics-child.vue'; import dataStatisticsChild from '@/components/active/data-statistics-child.vue';
import dataStatistics from '@/components/active/data-statistics.vue'; import dataStatistics from '@/components/active/data-statistics.vue';
import barChart from '@/components/active/bar-chart.vue'; import barChart from '@/components/active/bar-chart.vue';
import funnelChart from '@/components/active/funnel-chart.vue'; import funnelChart from '@/components/active/funnel-chart.vue';
import Clipboard from 'clipboard';
import showMsg from '@/common/js/showmsg';
export default { export default {
name: 'share-index', name: 'share-index',
components: { components: {
outDateActive,
funnelChart, funnelChart,
barChart, barChart,
dataStatistics, dataStatistics,
...@@ -47,15 +103,82 @@ export default { ...@@ -47,15 +103,82 @@ export default {
{ '日期': '1/5', '访问用户': 3192, '下单用户': 3192, '传播系数': 0.323 }, { '日期': '1/5', '访问用户': 3192, '下单用户': 3192, '传播系数': 0.323 },
{ '日期': '1/6', '访问用户': 3593, '下单用户': 3293, '传播系数': 0.78 } { '日期': '1/6', '访问用户': 3593, '下单用户': 3293, '传播系数': 0.78 }
] ]
} },
selectItem: '',
finishedData: [
{
id: 1,
},
{
id: 2,
}
]
} }
}, },
methods: { methods: {
/**
* 选择 li
*/
selectLi(item) {
const that = this;
that.selectItem = item.id;
},
/**
* 复制路径
*/
handleCopy(index, row) {
let clipboard = new Clipboard('.copy-tag', {
text: function() {
return `${window.location.origin}/?articleId=${row.articleId}`;
}
});
clipboard.on('success', e => {
showMsg.showmsg('复制成功!', 'success');
// 释放内存
clipboard.destroy();
});
clipboard.on('error', e => {
// 不支持复制
showMsg.showmsg('该浏览器不支持自动复制!', 'warning');
// 释放内存
clipboard.destroy();
});
},
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.share-index { .share-index {
.separator-space {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 14px;
color: #909399;
}
// 结束活动
.finished-active {
width: 100%;
padding: 0 42px 48px 46px;
background: #fff;
li {
&.li-border {
padding: 0 20px;
box-shadow: 0px 0px 8px 3px rgba(154, 170, 201, 0.11);
border-radius: 4px;
border: 1px solid rgba(220, 223, 230, 1);
}
}
.finished-active-title {
padding: 27px 0 20px 0;
border-bottom: 1px solid #dcdfe6;
}
.finished-active-body {
padding: 20px 0;
}
}
} }
</style> </style>
static/css/public.css
...@@ -90,7 +90,13 @@ video { ...@@ -90,7 +90,13 @@ video {
font-weight: normal; font-weight: normal;
vertical-align: baseline; vertical-align: baseline;
box-sizing: border-box; box-sizing: border-box;
font-family: Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; font-family: Roboto,
Helvetica Neue,
Helvetica,
Tahoma,
Arial,
PingFang SC,
Microsoft YaHei;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
...@@ -183,15 +189,18 @@ thumb, ...@@ -183,15 +189,18 @@ thumb,
scrollbarbutton { scrollbarbutton {
-moz-appearance: none !important; -moz-appearance: none !important;
} }
/* 鼠标悬停时按钮颜色 */ /* 鼠标悬停时按钮颜色 */
thumb:hover, thumb:hover,
scrollbarbutton:hover { scrollbarbutton:hover {
-moz-appearance: none !important; -moz-appearance: none !important;
} }
/* 隐藏上下箭头 */ /* 隐藏上下箭头 */
scrollbarbutton { scrollbarbutton {
display: none !important; display: none !important;
} }
/* 纵向滚动条宽度 */ /* 纵向滚动条宽度 */
scrollbar[orient='vertical'] { scrollbar[orient='vertical'] {
/*min-width: 15px !important;*/ /*min-width: 15px !important;*/
...@@ -211,6 +220,7 @@ scrollbarbutton { ...@@ -211,6 +220,7 @@ scrollbarbutton {
thumb { thumb {
-moz-appearance: none !important; -moz-appearance: none !important;
} }
scrollcorner { scrollcorner {
-moz-appearance: none !important; -moz-appearance: none !important;
resize: both; resize: both;
...@@ -220,21 +230,25 @@ scrollcorner { ...@@ -220,21 +230,25 @@ scrollcorner {
scrollbar[orient='vertical'] { scrollbar[orient='vertical'] {
color: silver; color: silver;
} }
-moz-scrollbar-track { -moz-scrollbar-track {
width: 5px; width: 5px;
border: none; border: none;
background: #ff0000; background: #ff0000;
} }
-moz-scrollbar-face { -moz-scrollbar-face {
width: 5px; width: 5px;
border: none; border: none;
background: #ff0000; background: #ff0000;
} }
-moz-scrollbar-arrow { -moz-scrollbar-arrow {
width: 5px; width: 5px;
border: none; border: none;
background: #ff0000; background: #ff0000;
} }
-moz-scrollbar { -moz-scrollbar {
-moz-scrollbar-width: 15px; -moz-scrollbar-width: 15px;
-moz-scrollbar-border: 1px solid black; -moz-scrollbar-border: 1px solid black;
...@@ -251,20 +265,24 @@ body { ...@@ -251,20 +265,24 @@ body {
height: 100%; height: 100%;
background-color: #f0f2f5; background-color: #f0f2f5;
} }
body { body {
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
input:focus { input:focus {
box-shadow: none; box-shadow: none;
outline: none; outline: none;
} }
.btn-default { .btn-default {
color: #333; color: #333;
border: 1px solid #ddd; border: 1px solid #ddd;
background-color: #f7f7f7; background-color: #f7f7f7;
cursor: pointer; cursor: pointer;
} }
.btn { .btn {
font-size: 12px; font-size: 12px;
border-radius: 2px; border-radius: 2px;
...@@ -272,6 +290,7 @@ input:focus { ...@@ -272,6 +290,7 @@ input:focus {
height: 32px; height: 32px;
line-height: 14px; line-height: 14px;
} }
.btn-new { .btn-new {
color: #333; color: #333;
border: 1px solid #fede29; border: 1px solid #fede29;
...@@ -282,9 +301,11 @@ input:focus { ...@@ -282,9 +301,11 @@ input:focus {
.fl { .fl {
float: left; float: left;
} }
.fr { .fr {
float: right; float: right;
} }
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
display: block; display: block;
...@@ -293,12 +314,15 @@ input:focus { ...@@ -293,12 +314,15 @@ input:focus {
content: ''; content: '';
clear: both; clear: both;
} }
.clearfix { .clearfix {
zoom: 1; zoom: 1;
} }
.text-right { .text-right {
text-align: right; text-align: right;
} }
.over-hide { .over-hide {
overflow: hidden; overflow: hidden;
} }
...@@ -307,156 +331,215 @@ input:focus { ...@@ -307,156 +331,215 @@ input:focus {
.m-l-2 { .m-l-2 {
margin-left: 2px; margin-left: 2px;
} }
.m-l-4 { .m-l-4 {
margin-left: 4px; margin-left: 4px;
} }
.m-l-8 { .m-l-8 {
margin-left: 8px; margin-left: 8px;
} }
.m-l-16 { .m-l-16 {
margin-left: 16px; margin-left: 16px;
} }
.m-l-20 { .m-l-20 {
margin-left: 20px; margin-left: 20px;
} }
.m-l-220 { .m-l-220 {
margin-left: 220px; margin-left: 220px;
} }
.m-t-05 { .m-t-05 {
margin-top: -5px; margin-top: -5px;
} }
.m-t-5 {
margin-top: 5px;
}
.m-t-10 { .m-t-10 {
margin-top: 10px; margin-top: 10px;
} }
.m-t-18 { .m-t-18 {
margin-top: 18px; margin-top: 18px;
} }
.m-t-20 { .m-t-20 {
margin-top: 20px; margin-top: 20px;
} }
.m-r-6 { .m-r-6 {
margin-right: 6px; margin-right: 6px;
} }
.m-r-8 { .m-r-8 {
margin-right: 8px; margin-right: 8px;
} }
.m-r-10 { .m-r-10 {
margin-right: 10px; margin-right: 10px;
} }
.m-r-20 { .m-r-20 {
margin-right: 20px; margin-right: 20px;
} }
.m-b-20 { .m-b-20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.m-b-26 { .m-b-26 {
margin-bottom: 26px; margin-bottom: 26px;
} }
.p-t-5 { .p-t-5 {
padding-top: 5px; padding-top: 5px;
} }
.p-t-10 { .p-t-10 {
padding-top: 10px; padding-top: 10px;
} }
.p-20 { .p-20 {
padding: 20px; padding: 20px;
} }
.p-lr-4 { .p-lr-4 {
padding: 0 4px; padding: 0 4px;
} }
.p-lr-10 {
padding: 0 10px;
}
.p-lr-18 { .p-lr-18 {
padding: 0 18px; padding: 0 18px;
} }
.p-l-8 { .p-l-8 {
padding-left: 8px; padding-left: 8px;
} }
.p-l-10 { .p-l-10 {
padding-left: 10px; padding-left: 10px;
} }
.p-l-20 { .p-l-20 {
padding-left: 20px; padding-left: 20px;
} }
.p-l-32 { .p-l-32 {
padding-left: 32px; padding-left: 32px;
} }
.p-l-36 { .p-l-36 {
padding-left: 36px; padding-left: 36px;
} }
.p-r-8 { .p-r-8 {
padding-right: 8px; padding-right: 8px;
} }
.p-r-12 { .p-r-12 {
padding-right: 12px; padding-right: 12px;
} }
.p-r-20 { .p-r-20 {
padding-right: 20px; padding-right: 20px;
} }
.w_100 { .w_100 {
width: 100%; width: 100%;
} }
.w-86 { .w-86 {
width: 86px; width: 86px;
} }
.w-90 { .w-90 {
width: 90px; width: 90px;
} }
.w-98 { .w-98 {
width: 98px; width: 98px;
} }
.w-180 { .w-180 {
width: 180px; width: 180px;
} }
.w-182 { .w-182 {
width: 182px; width: 182px;
} }
.w-184 { .w-184 {
width: 184px; width: 184px;
} }
.w-200 { .w-200 {
width: 200px; width: 200px;
} }
.w200 { .w200 {
width: 200px; width: 200px;
} }
.w-220 { .w-220 {
width: 220px; width: 220px;
} }
.w-223 { .w-223 {
width: 223px; width: 223px;
} }
.w-243 { .w-243 {
width: 243px; width: 243px;
} }
.w-290 { .w-290 {
width: 290px; width: 290px;
} }
.w-309 { .w-309 {
width: 309px; width: 309px;
} }
.w-384 { .w-384 {
width: 384px; width: 384px;
} }
.w-329 { .w-329 {
width: 329px; width: 329px;
} }
.w-375 { .w-375 {
width: 375px; width: 375px;
} }
.w-427 { .w-427 {
width: 427px; width: 427px;
} }
.w-400 { .w-400 {
width: 400px; width: 400px;
} }
.w-485 { .w-485 {
width: 485px; width: 485px;
} }
.w-536 { .w-536 {
width: 536px; width: 536px;
} }
.w-548 { .w-548 {
width: 548px; width: 548px;
} }
.border-box { .border-box {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -472,12 +555,15 @@ input:focus { ...@@ -472,12 +555,15 @@ input:focus {
.inline-block { .inline-block {
display: inline-block; display: inline-block;
} }
.block { .block {
display: block; display: block;
} }
.top { .top {
vertical-align: top; vertical-align: top;
} }
.middle { .middle {
vertical-align: middle; vertical-align: middle;
} }
...@@ -489,12 +575,14 @@ input:focus { ...@@ -489,12 +575,14 @@ input:focus {
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.flex-1 { .flex-1 {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1; -webkit-flex: 1;
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
} }
.flex-column { .flex-column {
-webkit-flex-direction: column; -webkit-flex-direction: column;
-moz-flex-direction: column; -moz-flex-direction: column;
...@@ -502,6 +590,7 @@ input:focus { ...@@ -502,6 +590,7 @@ input:focus {
-o-flex-direction: column; -o-flex-direction: column;
flex-direction: column; flex-direction: column;
} }
.flex-row { .flex-row {
-webkit-flex-direction: row; -webkit-flex-direction: row;
-moz-flex-direction: row; -moz-flex-direction: row;
...@@ -509,18 +598,29 @@ input:focus { ...@@ -509,18 +598,29 @@ input:focus {
-o-flex-direction: row; -o-flex-direction: row;
flex-direction: row; flex-direction: row;
} }
.flex-align-center { .flex-align-center {
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
} }
.flex-pack-center { .flex-pack-center {
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
} }
.flex-space-between {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
.flex-wrap { .flex-wrap {
-webkit-flex-wrap: wrap; -webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap; -moz-flex-wrap: wrap;
...@@ -528,10 +628,12 @@ input:focus { ...@@ -528,10 +628,12 @@ input:focus {
-o-flex-wrap: wrap; -o-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
} }
.dialog-footer { .dialog-footer {
font-size: 0; font-size: 0;
/*height: 35px;*/ /*height: 35px;*/
} }
.font-0 .el-form-item__content { .font-0 .el-form-item__content {
font-size: 0; font-size: 0;
} }
...@@ -541,41 +643,64 @@ i { ...@@ -541,41 +643,64 @@ i {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }
.font-0 {
font-size: 0px;
}
.font-10 { .font-10 {
font-size: 10px; font-size: 10px;
} }
.font-12 { .font-12 {
font-size: 12px; font-size: 12px;
} }
.font-14 { .font-14 {
font-size: 14px; font-size: 14px;
} }
.font-16 {
font-size: 16px;
}
.font-18 { .font-18 {
font-size: 18px; font-size: 18px;
} }
.font-20 { .font-20 {
font-size: 20px; font-size: 20px;
} }
.font-22 { .font-22 {
font-size: 22px; font-size: 22px;
} }
.font-24 {
font-size: 24px;
}
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
/* 颜色 */ /* 颜色 */
.color-blue { .color-1890ff {
color: #1890ff; color: #1890ff;
} }
.color-303133 { .color-303133 {
color: #303133; color: #303133;
} }
.color-909399 { .color-909399 {
color: #909399; color: #909399;
} }
.color-c0c4cc { .color-c0c4cc {
color: #c0c4cc; color: #c0c4cc;
} }
.color-606266 { .color-606266 {
color: #606266; color: #606266;
} }
...@@ -592,9 +717,11 @@ i { ...@@ -592,9 +717,11 @@ i {
margin: 20px 0; margin: 20px 0;
text-align: right; text-align: right;
} }
.dialogwrap { .dialogwrap {
position: relative; position: relative;
} }
.dialogwrap:before { .dialogwrap:before {
position: absolute; position: absolute;
left: -20px; left: -20px;
...@@ -603,9 +730,11 @@ i { ...@@ -603,9 +730,11 @@ i {
content: ''; content: '';
border-bottom: 1px solid #dedede; border-bottom: 1px solid #dedede;
} }
.dialogcontent { .dialogcontent {
padding: 0 10px; padding: 0 10px;
} }
input:-webkit-autofill, input:-webkit-autofill,
textarea:-webkit-autofill, textarea:-webkit-autofill,
select:-webkit-autofill { select:-webkit-autofill {
...@@ -615,15 +744,19 @@ select:-webkit-autofill { ...@@ -615,15 +744,19 @@ select:-webkit-autofill {
background-image: none; background-image: none;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
} }
.el-table th { .el-table th {
background: #f1f3f7 !important; background: #f1f3f7 !important;
} }
.slide-fade-enter-active { .slide-fade-enter-active {
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
} }
.slide-fade-leave-active { .slide-fade-leave-active {
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
} }
.slide-fade-enter, .slide-fade-enter,
.slide-fade-leave-to { .slide-fade-leave-to {
opacity: 0; opacity: 0;
...@@ -650,6 +783,7 @@ select:-webkit-autofill { ...@@ -650,6 +783,7 @@ select:-webkit-autofill {
border-radius: 2px; border-radius: 2px;
box-shadow: 0 -1px 10px #dfdfdf; box-shadow: 0 -1px 10px #dfdfdf;
} }
.breadcrumb .breadcrumb-title { .breadcrumb .breadcrumb-title {
margin: 30px 0 10px 0; margin: 30px 0 10px 0;
font-size: 20px; font-size: 20px;
...@@ -660,15 +794,18 @@ select:-webkit-autofill { ...@@ -660,15 +794,18 @@ select:-webkit-autofill {
height: 100%; height: 100%;
display: flex; display: flex;
} }
.content-wrap .right-wrap { .content-wrap .right-wrap {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.content-wrap .right-wrap .right-content { .content-wrap .right-wrap .right-content {
padding: 24px; padding: 24px;
} }
.content-wrap .right-wrap .right-content .right-box { .content-wrap .right-wrap .right-content .right-box {
background: #fff; background: #fff;
padding: 24px; padding: 24px;
...@@ -688,6 +825,7 @@ select:-webkit-autofill { ...@@ -688,6 +825,7 @@ select:-webkit-autofill {
position: absolute; position: absolute;
bottom: -30px; bottom: -30px;
} }
.el-form .el-form-item.is-success .el-input__inner, .el-form .el-form-item.is-success .el-input__inner,
.el-form .el-form-item.is-success .el-input__inner:focus, .el-form .el-form-item.is-success .el-input__inner:focus,
.el-form .el-form-item.is-success .el-textarea__inner, .el-form .el-form-item.is-success .el-textarea__inner,
...@@ -699,13 +837,16 @@ select:-webkit-autofill { ...@@ -699,13 +837,16 @@ select:-webkit-autofill {
.user-form-dialog .el-dialog__body { .user-form-dialog .el-dialog__body {
padding: 30px 20px 0; padding: 30px 20px 0;
} }
.user-form-dialog .el-dialog__header { .user-form-dialog .el-dialog__header {
padding: 0 20px; padding: 0 20px;
height: 54px; height: 54px;
} }
.pass-form-dialog .el-dialog__body { .pass-form-dialog .el-dialog__body {
padding: 30px 20px 0; padding: 30px 20px 0;
} }
.pass-form-dialog .el-dialog__header { .pass-form-dialog .el-dialog__header {
padding: 0 20px; padding: 0 20px;
height: 54px; height: 54px;
...@@ -715,37 +856,47 @@ select:-webkit-autofill { ...@@ -715,37 +856,47 @@ select:-webkit-autofill {
.leftBar-wrap .el-menu { .leftBar-wrap .el-menu {
background-color: #020b21; background-color: #020b21;
} }
.leftBar-wrap .cardmenu-item .el-submenu__title, .leftBar-wrap .cardmenu-item .el-submenu__title,
.leftBar-wrap .cardmenu-item .el-menu-item, .leftBar-wrap .cardmenu-item .el-menu-item,
.leftBar-wrap .cardmenu-item .el-submenu .el-menu-item { .leftBar-wrap .cardmenu-item .el-submenu .el-menu-item {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
.leftBar-wrap .el-submenu__title:hover { .leftBar-wrap .el-submenu__title:hover {
background-color: #020b21; background-color: #020b21;
} }
.leftBar-wrap .cardmenu-item li.el-menu-item:hover i { .leftBar-wrap .cardmenu-item li.el-menu-item:hover i {
color: #fff; color: #fff;
} }
.leftBar-wrap .cardmenu-item li.el-menu-item:hover span { .leftBar-wrap .cardmenu-item li.el-menu-item:hover span {
color: #fff; color: #fff;
} }
.leftBar-wrap .cardmenu-item li.el-submenu:hover i { .leftBar-wrap .cardmenu-item li.el-submenu:hover i {
color: #fff; color: #fff;
} }
.leftBar-wrap .cardmenu-item li.el-submenu:hover span { .leftBar-wrap .cardmenu-item li.el-submenu:hover span {
color: #fff; color: #fff;
} }
.leftBar-wrap .cardmenu-item li.el-submenu .el-menu-item:hover label { .leftBar-wrap .cardmenu-item li.el-submenu .el-menu-item:hover label {
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
} }
.leftBar-wrap .cardmenu-item .el-submenu.is-active div.el-submenu__title i { .leftBar-wrap .cardmenu-item .el-submenu.is-active div.el-submenu__title i {
color: #fff; color: #fff;
} }
.leftBar-wrap .cardmenu-item .el-submenu.is-active div.el-submenu__title span { .leftBar-wrap .cardmenu-item .el-submenu.is-active div.el-submenu__title span {
color: #fff; color: #fff;
} }
.el-menu.el-menu--popup .el-menu-item.is-active label { .el-menu.el-menu--popup .el-menu-item.is-active label {
color: #fff; color: #fff;
} }
...@@ -757,15 +908,19 @@ select:-webkit-autofill { ...@@ -757,15 +908,19 @@ select:-webkit-autofill {
.table-label .el-form-item__label { .table-label .el-form-item__label {
line-height: 48px; line-height: 48px;
} }
.el-table th .cell { .el-table th .cell {
font-size: 14px; font-size: 14px;
} }
#index .el-table__empty-block { #index .el-table__empty-block {
height: 256px; height: 256px;
} }
.common-wrap__table .el-table__empty-text { .common-wrap__table .el-table__empty-text {
margin-bottom: 40px; margin-bottom: 40px;
} }
.common-wrap__fix__table .el-table__empty-text { .common-wrap__fix__table .el-table__empty-text {
margin-bottom: 40px; margin-bottom: 40px;
} }
...@@ -774,9 +929,11 @@ select:-webkit-autofill { ...@@ -774,9 +929,11 @@ select:-webkit-autofill {
.common-wrap__page { .common-wrap__page {
padding: 24px 0 30px 0; padding: 24px 0 30px 0;
} }
.common-wrap__page .el-input { .common-wrap__page .el-input {
font-size: 12px; font-size: 12px;
} }
.common-wrap__page .el-input__inner { .common-wrap__page .el-input__inner {
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
...@@ -786,40 +943,51 @@ select:-webkit-autofill { ...@@ -786,40 +943,51 @@ select:-webkit-autofill {
.singelinfo { .singelinfo {
justify-content: flex-start; justify-content: flex-start;
} }
.singelinfo-img { .singelinfo-img {
flex: 0 0 100px; flex: 0 0 100px;
} }
.singelinfo-wrap { .singelinfo-wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.singelinfo-content { .singelinfo-content {
padding: 0 10px; padding: 0 10px;
} }
.singelinfo-item { .singelinfo-item {
line-height: 0; line-height: 0;
} }
.singelinfo-jl { .singelinfo-jl {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 20px 0; margin: 20px 0;
} }
.singelinfo-jlitem { .singelinfo-jlitem {
text-align: center; text-align: center;
} }
.singelinfo-cost { .singelinfo-cost {
text-align: center; text-align: center;
} }
.lheigth0 { .lheigth0 {
color: #303133; color: #303133;
margin: 5px 0; margin: 5px 0;
} }
.lheigth0 span { .lheigth0 span {
color: #606266; color: #606266;
} }
.evl-right { .evl-right {
margin-right: 5px; margin-right: 5px;
} }
.singelinfo-costitem p { .singelinfo-costitem p {
margin: 5px 0; margin: 5px 0;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment