feat: 营运数据接口联调,部分央视修改

This commit is contained in:
mx00085@163.com
2023-03-30 14:53:34 +08:00
parent 42e0665c37
commit 4fb5105b03
4 changed files with 575 additions and 83 deletions

View File

@@ -15,4 +15,8 @@ export const boeuExamPageListV2 = (obj) => http.post('/boeu/exam/pageList/v2', o
// 问答分页列表
export const boeuQuestionPageList= (obj) => http.post('/boeu/question/pageList', obj )
//柱状体左侧获取数据接口
export const dataStatisticsSelectV1= (obj) => http.post('/data/statistics/select/v1', obj )
export const dataStatisticsSelectV1= (obj) => http.post('/data/statistics/select/v1', obj )
//柱状体右侧获取数据接口
export const dataStatisticsSelectV2= (obj) => http.post('/data/statistics/select/v2', obj )
// 图表2 学习情况数据接口
export const boeuStudyDataGetStudyStaisticsList= (obj) => http.post('/boeu/studyData/getStudyStatisticsList', obj )

View File

@@ -37,7 +37,9 @@
<!-- 以下为导出按钮 -->
<div class="btnzs">
<div class="btnz btnz3" @click="exportAll">
<div><img src="../../assets/images/coursewareManage/export1.png" alt="" /></div>
<div>
<img src="../../assets/images/coursewareManage/export1.png" alt="" />
</div>
<div class="btnzText">导出</div>
</div>
</div>
@@ -59,14 +61,20 @@
<a-tooltip placement="topRight">
<template #title>
<span>{{
record.publishTime &&
dayjs(record.publishTime).format("YYYY-MM-DD HH:mm:ss")
record.sysUpdateTime
? dayjs(record.sysUpdateTime).format("YYYY-MM-DD HH:mm:ss")
: record.sysCreateTime
? dayjs(record.sysCreateTime).format("YYYY-MM-DD HH:mm:ss")
: ""
}}</span>
</template>
<span>{{
record.publishTime &&
dayjs(record.publishTime).format("YYYY-MM-DD HH:mm:ss")
}}</span>
record.sysUpdateTime
? dayjs(record.sysUpdateTime).format("YYYY-MM-DD HH:mm:ss")
: record.sysCreateTime
? dayjs(record.sysCreateTime).format("YYYY-MM-DD HH:mm:ss")
: ""
}}</span>
</a-tooltip>
</template>
<template v-if="column.key === 'status'">
@@ -182,12 +190,12 @@ export default {
if (res) {
state.tableLoading = false;
state.tableDataTotal = res.data.total;
const list =res.data.rows?.map((item)=>{
const list = res.data.rows?.map((item) => {
return {
...item,
key:item.id
}
})
key: item.id,
};
});
tableData.value = list;
}
};
@@ -314,7 +322,7 @@ export default {
margin-bottom: 20px;
width: calc((100% - 76px - 200px) / 2);
}
.btnz {
padding: 0px 26px 0px 26px;
height: 38px;

View File

@@ -15,7 +15,8 @@
value: 'id',
children: 'treeChildList',
}"
></a-cascader>
>
</a-cascader>
</div>
<div class="select">
<a-input
@@ -77,6 +78,33 @@
onChange: onSelectChange,
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'createTime'">
<a-tooltip placement="topRight">
<template #title>
<span>{{
record.createTime &&
dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")
}}</span>
</template>
<span>{{
record.createTime &&
dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")
}}</span>
</a-tooltip>
</template>
<template v-if="column.key === 'status'">
<span>{{
record.status == "0"
? "草稿"
: record.status == "1"
? "已发布"
: record.status == "-1"
? "停用"
: ""
}}</span>
</template>
</template>
</a-table>
<div class="tableBox">
<div class="pa">
@@ -104,6 +132,7 @@ import { ref, toRefs, reactive, onMounted } from "vue";
import downLoad from "../../utils/downLoad";
import Cookies from "vue-cookies";
import axios from "axios";
import dayjs from "dayjs";
export default {
name: "LearningPathMap",
setup() {
@@ -413,6 +442,7 @@ export default {
tableData,
columns,
changePagination,
dayjs,
};
},
};

View File

@@ -2,7 +2,7 @@
<!-- 营运数据概览页面! -->
<div class="operational">
<div class="echartsOne">
<!-- <div class="echartsOne">
<div class="title">
<div class="left">用户活动趋势</div>
<div class="right">
@@ -64,12 +64,12 @@
<div class="text">访问次数</div>
</div>
</div>
</div>
</div> -->
<div class="echartsTwo">
<div class="title">
<div class="left">学习情况</div>
<div class="right">
<img src="../../assets/svg/export.png" alt="" />
<div class="right" @click="exportTwoData">
<img src="../../assets/images/coursewareManage/export1.png" alt="" />
<span>导出活动详情</span>
</div>
</div>
@@ -77,25 +77,73 @@
<div class="left">
<div class="leftItem">
<a-select
style="width: 100%"
style="width: 112px"
placeholder="请选择模块"
v-model:value="towParmasn.type"
@change="modalChange"
:options="[
{
label: '项目',
value: 1,
},
{
label: '学习路径图',
value: 2,
},
{
label: '课程',
value: 3,
},
{
label: '案例',
value: 4,
},
{
label: '文章',
value: 5,
},
{
label: '问答',
value: 6,
},
]"
allowClear
></a-select>
</div>
<div class="leftItem">
<a-select
style="width: 100%"
style="width: 112px"
placeholder="请选择日期格式"
allowClear
@change="twoSelectChange"
:options="[
{ label: '按日查找', value: 0 },
{ label: '按月查找', value: 1 },
]"
v-model:value="towParmasn.dateType"
></a-select>
</div>
<div class="leftItem">
<a-range-picker
style="width: 100%"
format="YYYY-MM-DD"
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
/>
<div class="timeItemSearch">
<a-range-picker
v-if="towParmasn.dateType == 0"
style="width: 100%"
format="YYYY-MM-DD"
v-model:value="towParmasn.day"
separator="至"
@change="twoDatChange"
:placeholder="[' 开始时间', ' 结束时间']"
/>
<a-range-picker
v-if="towParmasn.dateType == 1"
style="width: 100%"
v-model:value="towParmasn.time"
@change="twoMonthChange"
format="YYYY-MM"
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
picker="month"
/>
</div>
</div>
</div>
</div>
@@ -126,7 +174,7 @@
<div class="title">
<div class="leftTile">学习内容</div>
<div class="rightTile" @click="exportThree">
<img src="../../assets/svg/export.png" alt="" />
<img src="../../assets/images/coursewareManage/export1.png" alt="" />
<span>导出学习内容</span>
</div>
</div>
@@ -189,8 +237,8 @@
<div class="right">
<div class="title">
<div class="leftTile">学习内容</div>
<div class="rightTile">
<img src="../../assets/svg/export.png" alt="" />
<div class="rightTile" @click="exportRight">
<img src="../../assets/images/coursewareManage/export1.png" alt="" />
<span>导出学习内容</span>
</div>
</div>
@@ -214,15 +262,17 @@
style="width: 100%"
format="YYYY-MM-DD"
v-model:value="forDay"
@change="rightDayChange"
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
/>
<a-range-picker
v-if="threeLeftType == 1"
v-if="forRightType == 1"
style="width: 100%"
v-model:value="forTime"
format="YYYY-MM"
separator="至"
@change="rightMonthChange"
:placeholder="[' 开始时间', ' 结束时间']"
picker="month"
/>
@@ -262,15 +312,19 @@ export default {
name: "OperationaL",
setup() {
const state = reactive({
threeData: [],
threeLeftType: 1,
threeTime: [],
threeDay: [],
threeXData: [],
forData: [],
forRightType: 1,
forTime: [],
forDay: [],
towParmasn: {
type: 1,
dateType: 1,
time: [],
day: [],
},
});
const surfaceRef = ref(null);
const surface1Ref = ref(null);
@@ -278,8 +332,86 @@ export default {
const surface3Ref = ref(null);
const dates = ref();
// const value = ref();
const hackValue = ref();
const datess = ref();
const hackValues = ref();
const exportTwoData = async () => {
if (state.towParmasn.dateType == 0) {
if (!state.towParmasn.day?.length || state.towParmasn.day?.length < 1) {
message.error("请选择要导出的时间日期后再进行导出");
} else {
const dayStart = dayjs(state.towParmasn.day[0])
.startOf("day")
.format("YYYY-MM-DD 00:00:01");
const dayEnd = dayjs(state.towParmasn.day[1])
.endOf("day")
.format("YYYY-MM-DD hh:mm:ss");
axios({
method: "post",
url: "/report/boeu/studyData/exportDetailAll",
data: {
beginTime: dayStart,
endTime: dayEnd,
dateType: state.towParmasn.dateType,
type: state.towParmasn.type,
},
responseType: "blob",
headers: {
token: Cookies.get("token"),
},
}).then(
(res) => {
downLoad(res.data, "学习情况.xlsx");
},
(err) => {
message.error(err);
}
);
}
} else if (state.towParmasn.dateType == 1) {
if (
!state.towParmasn.time?.length ||
state.towParmasn.time?.length < 1
) {
message.error("请选择要导出的月份后再进行导出");
} else {
const monthEnd = dayjs(state.towParmasn.time[1])
.endOf("month")
.format("YYYY-MM-DD hh:mm:ss");
axios({
method: "post",
url: "/report/data/statistics/export/v2",
data: {
beginTime: dayjs(state.towParmasn.time[0]).format(
"YYYY-MM-01 00:00:01"
),
endTime: monthEnd,
dateType: state.towParmasn.dateType,
type: state.towParmasn.type,
},
responseType: "blob",
headers: {
token: Cookies.get("token"),
},
}).then(
(res) => {
downLoad(res.data, "学习情况.xlsx");
},
(err) => {
message.error(err);
}
);
}
}
};
const modalChange = async () => {
if (state.towParmasn.dateType == 1) {
twoMonthChange(state.towParmasn.time);
} else if (state.towParmasn.dateType == 0) {
twoDatChange(state.towParmasn.day);
}
};
const onCalendarChange = (val) => {
dates.value = val;
};
@@ -301,6 +433,148 @@ export default {
dates.value[1] && dates.value[1].diff(current, "days") > 60;
return tooEarly || tooLate;
};
const onCalendarChanges = (val) => {
datess.value = val;
};
const onOpenChanges = (open) => {
if (open) {
datess.value = [];
hackValues.value = [];
} else {
hackValues.value = undefined;
}
};
const disabledDates = (current) => {
if (!datess.value || datess.value.length === 0) {
return false;
}
const tooLate =
datess.value[0] && current.diff(datess.value[0], "days") > 60;
const tooEarly =
datess.value[1] && datess.value[1].diff(current, "days") > 60;
return tooEarly || tooLate;
};
const twoSelectChange = async (e) => {
if (e == 1) {
twoMonthChange(state.towParmasn.time);
} else if (e == 0) {
twoDatChange(state.towParmasn.day);
}
};
// 获取图表2月份数据
const twoMonthChange = async (e) => {
if (e?.length > 0) {
const monthEnd = dayjs(e[1])
.endOf("month")
.format("YYYY-MM-DD hh:mm:ss");
const res = await api.boeuStudyDataGetStudyStaisticsList({
beginTime: dayjs(e[0]).format("YYYY-MM-01 00:00:01"),
endTime: monthEnd,
dateType: state.towParmasn.dateType,
type: state.towParmasn.type,
});
if (res) {
if (
state.towParmasn.type == 4 ||
state.towParmasn.type == 5 ||
state.towParmasn.type == 6
) {
const xData = [];
const avgDuration = [];
const count = [];
const duration = [];
res?.data?.forEach((item) => {
xData.push(item.month);
avgDuration.push(item.viewCount);
count.push(item.count);
duration.push(item.duration);
});
option.value.xAxis.data = xData;
// 右侧坐标轴数据
option.value.series[0].data = count;
//左侧坐标轴数据
option.value.series[1].data = avgDuration;
option.value.series[2].data = duration;
createEcharts2();
} else {
const xData = [];
const avgDuration = [];
const count = [];
const duration = [];
res?.data?.forEach((item) => {
xData.push(item.month);
avgDuration.push(item.avgDuration);
count.push(item.count);
duration.push(item.duration);
});
option.value.xAxis.data = xData;
// 右侧坐标轴数据
option.value.series[0].data = count;
//左侧坐标轴数据
option.value.series[1].data = avgDuration;
option.value.series[2].data = duration;
createEcharts2();
}
}
}
};
const twoDatChange = async (e) => {
if (e?.length > 0) {
const dayStart = dayjs(e[0])
.startOf("day")
.format("YYYY-MM-DD 00:00:01");
const dayEnd = dayjs(e[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
const res = await api.boeuStudyDataGetStudyStaisticsList({
beginTime: dayStart,
endTime: dayEnd,
dateType: state.towParmasn.dateType,
type: state.towParmasn.type,
});
if (res) {
if (
state.towParmasn.type == 4 ||
state.towParmasn.type == 5 ||
state.towParmasn.type == 6
) {
const xData = [];
const avgDuration = [];
const count = [];
const duration = [];
res?.data?.forEach((item) => {
xData.push(item.month);
avgDuration.push(item.viewCount);
count.push(item.count);
duration.push(item.duration);
});
option.value.xAxis.data = xData;
// 右侧坐标轴数据
option.value.series[0].data = count;
//左侧坐标轴数据
option.value.series[1].data = avgDuration;
option.value.series[2].data = duration;
createEcharts2();
} else {
const xData = [];
const avgDuration = [];
const count = [];
const duration = [];
res?.data?.forEach((item) => {
xData.push(item.month);
avgDuration.push(item.avgDuration);
count.push(item.count);
duration.push(item.duration);
});
option.value.xAxis.data = xData;
// 右侧坐标轴数据
option.value.series[0].data = count;
//左侧坐标轴数据
option.value.series[1].data = avgDuration;
option.value.series[2].data = duration;
createEcharts2();
}
}
}
};
// 获取第第三排第一个柱状图的数据
const leftMonthChange = async (e) => {
if (e?.length > 0) {
@@ -383,7 +657,7 @@ export default {
//第三排第一个柱状图导出数据
const exportThree = () => {
if (state.threeLeftType == 0) {
if (state.threeDay.length < 1) {
if (!state.threeDay.length || state.threeDay.length < 1) {
message.error("请选择要导出的时间日期后再进行导出");
} else {
const dayStart = dayjs(state.threeDay[0])
@@ -414,17 +688,17 @@ export default {
);
}
} else if (state.threeLeftType == 1) {
if (state.threeData.length < 1) {
if (!state.threeTime.length || state.threeTime.length < 1) {
message.error("请选择要导出的月份后再进行导出");
} else {
const monthEnd = dayjs(state.threeData[1])
const monthEnd = dayjs(state.threeTime[1])
.endOf("month")
.format("YYYY-MM-DD hh:mm:ss");
axios({
method: "post",
url: "/report/data/statistics/export/v1",
data: {
startTime: dayjs(state.threeData[0]).format(
startTime: dayjs(state.threeTime[0]).format(
"YYYY-MM-01 00:00:01"
),
endTime: monthEnd,
@@ -447,13 +721,146 @@ export default {
};
const rightChange = (e) => {
if (e == 1) {
// leftMonthChange(state.threeTime);
rightMonthChange(state.forTime);
} else if (e == 0) {
// leftDayChange(state.threeDay);
rightDayChange(state.forDay);
}
};
// 获取第三排第二个柱状图的数据
const rightMonthChange = async (e) => {
if (e?.length > 0) {
const monthEnd = dayjs(e[1])
.endOf("month")
.format("YYYY-MM-DD hh:mm:ss");
const res = await api.dataStatisticsSelectV2({
startTime: dayjs(e[0]).format("YYYY-MM-01 00:00:01"),
endTime: monthEnd,
dateType: state.forRightType,
});
if (res) {
const xData = [];
const course = [];
const project = [];
const router = [];
res?.data?.forEach((item) => {
xData.push(item.xdata);
item?.list?.forEach((iten) => {
if (iten.name == "case") {
course.push(iten.value);
} else if (iten.name == "article") {
project.push(iten.value);
} else if (iten.name == "question") {
router.push(iten.value);
}
});
});
options2.value.xAxis.data = xData;
options2.value.series[0].data = course;
options2.value.series[1].data = project;
options2.value.series[2].data = router;
createEcharts4();
}
}
};
const rightDayChange = async (e) => {
if (e?.length > 0) {
const dayStart = dayjs(e[0])
.startOf("day")
.format("YYYY-MM-DD 00:00:01");
const dayEnd = dayjs(e[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
const res = await api.dataStatisticsSelectV2({
startTime: dayStart,
endTime: dayEnd,
dateType: state.forRightType,
});
if (res) {
const xData = [];
const course = [];
const project = [];
const router = [];
res?.data?.forEach((item) => {
xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
item?.list?.forEach((iten) => {
if (iten.name == "case") {
course.push(iten.value);
} else if (iten.name == "article") {
project.push(iten.value);
} else if (iten.name == "question") {
router.push(iten.value);
}
});
});
options2.value.xAxis.data = xData;
options2.value.series[0].data = course;
options2.value.series[1].data = project;
options2.value.series[2].data = router;
createEcharts4();
}
}
};
// right 导出
const exportRight = () => {
if (state.forRightType == 0) {
if (!state.forDay.length || state.forDay.length < 1) {
message.error("请选择要导出的时间日期后再进行导出");
} else {
const dayStart = dayjs(state.forDay[0])
.startOf("day")
.format("YYYY-MM-DD 00:00:01");
const dayEnd = dayjs(state.forDay[1])
.endOf("day")
.format("YYYY-MM-DD hh:mm:ss");
axios({
method: "post",
url: "/report/data/statistics/export/v2",
data: {
startTime: dayStart,
endTime: dayEnd,
dateType: state.forRightType,
},
responseType: "blob",
headers: {
token: Cookies.get("token"),
},
}).then(
(res) => {
downLoad(res.data, "学习内容.xlsx");
},
(err) => {
message.error(err);
}
);
}
} else if (state.forRightType == 1) {
if (!state.forTime.length || state.forTime.length < 1) {
message.error("请选择要导出的月份后再进行导出");
} else {
const monthEnd = dayjs(state.forTime[1])
.endOf("month")
.format("YYYY-MM-DD hh:mm:ss");
axios({
method: "post",
url: "/report/data/statistics/export/v2",
data: {
startTime: dayjs(state.forTime[0]).format("YYYY-MM-01 00:00:01"),
endTime: monthEnd,
dateType: state.forRightType,
},
responseType: "blob",
headers: {
token: Cookies.get("token"),
},
}).then(
(res) => {
downLoad(res.data, "学习内容.xlsx");
},
(err) => {
message.error(err);
}
);
}
}
};
// 折线图配置项
const option = ref({
tooltip: {
@@ -487,20 +894,39 @@ export default {
],
series: [
{
name: "访问人数",
name: "总学习人数",
type: "line",
data: [],
normal: {
color: "#387df7", //改变折线点的颜色
lineStyle: {
color: "#387df7", //改变折线颜色
},
},
},
{
name: "访问次数",
type: "line",
data: [],
},
{
name: "停留时长",
name: "人均学习时长",
type: "line",
data: [],
yAxisIndex: 1,
normal: {
color: "#00cecb", //改变折线点的颜色
lineStyle: {
color: "#00cecb", //改变折线颜色
},
},
},
{
name: "总学习时长",
type: "line",
data: [],
yAxisIndex: 1,
normal: {
color: "#ffa71a", //改变折线点的颜色
lineStyle: {
color: "#ffa71a", //改变折线颜色
},
},
},
],
});
@@ -531,24 +957,30 @@ export default {
name: "课程数",
data: [],
type: "bar",
backgroundStyle: {
color: "#1487F9",
itemStyle: {
normal: {
color: "#1487F9", //改变折线点的颜色
},
},
},
{
name: "项目数",
data: [],
type: "bar",
backgroundStyle: {
color: "#00CECB",
itemStyle: {
normal: {
color: "#00CECB", //改变折线点的颜色
},
},
},
{
name: "学习路径图",
data: [],
type: "bar",
backgroundStyle: {
color: "#FFA71A",
itemStyle: {
normal: {
color: "#FFA71A", //改变折线点的颜色
},
},
},
],
@@ -561,9 +993,9 @@ export default {
// end: 35,
startValue: 0,
endValue: 5,
// brushSelect: false,
brushSelect: false,
showDetail: false,
// zoomLock: true,
zoomLock: true,
},
],
});
@@ -594,24 +1026,30 @@ export default {
name: "课程数",
data: [],
type: "bar",
backgroundStyle: {
color: "#1487F9",
itemStyle: {
normal: {
color: "#1487F9", //改变折线点的颜色
},
},
},
{
name: "项目数",
data: [],
type: "bar",
backgroundStyle: {
color: "#00CECB",
itemStyle: {
normal: {
color: "#00CECB", //改变折线点的颜色
},
},
},
{
name: "学习路径图",
data: [],
type: "bar",
backgroundStyle: {
color: "#FFA71A",
itemStyle: {
normal: {
color: "#FFA71A", //改变折线点的颜色
},
},
},
],
@@ -624,19 +1062,19 @@ export default {
// end: 35,
startValue: 0,
endValue: 5,
// brushSelect: false,
brushSelect: false,
showDetail: false,
// zoomLock: true,
zoomLock: true,
},
],
});
// 生成echarts的方法
const createEcharts1 = () => {
// 图表1
const myChart = echarts.init(surfaceRef.value);
option.value && myChart.setOption(option.value);
};
// const createEcharts1 = () => {
// // 图表1
// const myChart = echarts.init(surfaceRef.value);
// option.value && myChart.setOption(option.value);
// };
// 生成echarts的方法
const createEcharts2 = () => {
// 图表2
@@ -660,11 +1098,14 @@ export default {
const start = dayjs(new Date()).startOf("year").format("YYYY-MM");
state.threeTime = [dayjs(start), dayjs(monthEnd)];
state.forTime = [dayjs(start), dayjs(monthEnd)];
state.towParmasn.time = [dayjs(start), dayjs(monthEnd)];
leftMonthChange([dayjs(start), dayjs(monthEnd)]);
rightMonthChange([dayjs(start), dayjs(monthEnd)]);
twoMonthChange([dayjs(start), dayjs(monthEnd)]);
};
// 挂载完成
onMounted(() => {
createEcharts1();
// createEcharts1();
createEcharts2();
createEcharts3();
createEcharts4();
@@ -672,6 +1113,7 @@ export default {
});
return {
...toRefs(state),
rightMonthChange,
rightChange,
exportThree,
disabledDate,
@@ -684,6 +1126,16 @@ export default {
leftMonthChange,
leftDayChange,
selectChange,
rightDayChange,
exportRight,
onCalendarChanges,
onOpenChanges,
disabledDates,
twoMonthChange,
twoDatChange,
twoSelectChange,
modalChange,
exportTwoData,
};
},
};
@@ -726,11 +1178,12 @@ export default {
.right {
padding: 0 15px;
background: white;
background: #4ea6ff;
height: 32px;
line-height: 34px;
border-radius: 4px;
color: #387df7;
border: 1px solid #387df7;
color: white;
// border: 1px solid #387df7;
cursor: pointer;
img {
margin-top: -3px;
@@ -738,7 +1191,7 @@ export default {
}
}
.right:hover {
background: rgba(64, 158, 255, 0.2);
background: rgba(64, 158, 255, 0.76);
}
}
.echarts {
@@ -842,12 +1295,11 @@ export default {
}
.rightTile {
padding: 0 15px;
background: white;
background: #4ea6ff;
height: 32px;
line-height: 34px;
border-radius: 4px;
color: #387df7;
border: 1px solid #387df7;
color: white;
cursor: pointer;
img {
margin-top: -3px;
@@ -855,7 +1307,7 @@ export default {
}
}
.rightTile:hover {
background: rgba(64, 158, 255, 0.2);
background: rgba(64, 158, 255, 0.76);
}
}
.searchThree {
@@ -874,7 +1326,6 @@ export default {
}
.threeMsg {
display: flex;
margin-top: 15px;
width: 275px;
margin-left: calc(50% - 133px);
margin-top: 10px;
@@ -916,7 +1367,7 @@ export default {
padding: 15px;
.leftEacharts {
width: 100%;
height: 300px;
height: 400px;
margin-top: 20px;
}
.title {
@@ -930,12 +1381,11 @@ export default {
}
.rightTile {
padding: 0 15px;
background: white;
background: #4ea6ff;
height: 32px;
line-height: 34px;
border-radius: 4px;
color: #387df7;
border: 1px solid #387df7;
color: white;
cursor: pointer;
img {
margin-top: -3px;
@@ -943,7 +1393,7 @@ export default {
}
}
.rightTile:hover {
background: rgba(64, 158, 255, 0.2);
background: rgba(64, 158, 255, 0.76);
}
}
.searchThree {
@@ -962,7 +1412,7 @@ export default {
}
.threeMsg {
display: flex;
margin-top: 15px;
margin-top: 10px;
width: 275px;
margin-left: calc(50% - 133px);
.threeMsgItem {