mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-10 19:36:47 +08:00
提交
This commit is contained in:
Pengxiansen
@@ -1,128 +1,169 @@
|
||||
<template>
|
||||
<div class="growth-path">
|
||||
<div class="nav">
|
||||
<ReturnHead text="专业力必修" :gohome="true"></ReturnHead>
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 1 ? 'active' : ''"
|
||||
@click="tabClick(1)"
|
||||
>
|
||||
<div class="tabs-text">必修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 2 ? 'active' : ''"
|
||||
@click="tabClick(2)"
|
||||
>
|
||||
<div class="tabs-text">选修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div class="growth-details">
|
||||
<div class="navbar">
|
||||
<div class="nav-left">
|
||||
<el-icon color="#fff" size="20"><ArrowLeft /></el-icon>
|
||||
</div>
|
||||
<div class="nav-title">专业力必修</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 1 ? 'active' : ''"
|
||||
@click="tabClick(1)"
|
||||
>
|
||||
<div class="tabs-text">必修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 2 ? 'active' : ''"
|
||||
@click="tabClick(2)"
|
||||
>
|
||||
<div class="tabs-text">选修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 占位容器防止塌陷 -->
|
||||
<div class="placeholder"></div>
|
||||
|
||||
<div
|
||||
class="path-container"
|
||||
v-loading="loading"
|
||||
:style="stageProcessList.length ? '' : 'height:400px'"
|
||||
>
|
||||
<template v-if="stageProcessList && stageProcessList.length">
|
||||
<div
|
||||
class="path-item"
|
||||
@click="toFinish(item)"
|
||||
v-for="(item, index) of stageProcessList"
|
||||
:key="item.id"
|
||||
<div class="search">
|
||||
<div class="search-input">
|
||||
<el-input
|
||||
v-model="queryParams.taskName"
|
||||
:input-style="{
|
||||
width: '100%',
|
||||
height: '40px',
|
||||
color: '#fff',
|
||||
}"
|
||||
@change="getList"
|
||||
placeholder="搜索关键字"
|
||||
>
|
||||
<div class="item-content">
|
||||
<div class="icon">
|
||||
<template v-if="item.lastStudy">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon4.png"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="item.completionStatus === '1'">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon1.png"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="item.completionStatus === '2'">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon2.png"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
item.completionStatus === '0' ||
|
||||
item.completionStatus === '10'
|
||||
"
|
||||
>
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon3.png"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<template v-if="item.completionStatus !== '2'">
|
||||
<div class="item-text">
|
||||
{{
|
||||
`${item.taskName}${
|
||||
item.completionStatus === "10" ? "（未解锁）" : ""
|
||||
}`
|
||||
}}
|
||||
<template #prefix>
|
||||
<el-icon color="#fff" class="el-input__icon"><search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-dropdown>
|
||||
<img class="icon" src="@/assets/image/growth/qiehuan.png" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="tabClick(null, '0')"
|
||||
>未开始</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="tabClick(null, '1')"
|
||||
>已完成</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="tabClick(null, '2')"
|
||||
>进行中</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!-- <img class="icon" src="@/assets/image/growth/list.png" /> -->
|
||||
<img class="icon" @click="toPath" src="@/assets/image/growth/list.png" />
|
||||
</div>
|
||||
<div class="container" v-loading="loading">
|
||||
<div :style="{ transform: 'scale(' + transformSize + ')' }">
|
||||
<div class="path-container">
|
||||
<div
|
||||
:class="
|
||||
item.position + 1 < 3 || item.position + 1 == 4 || item.position + 1 == 6
|
||||
? 'path-item-left'
|
||||
: 'path-item-right'
|
||||
"
|
||||
@click="toFinish(item)"
|
||||
:style="point[item.position]"
|
||||
v-for="(item, index) of stageProcessList"
|
||||
>
|
||||
<template v-if="item.position + 1 < 3 || item.position + 1 == 4 || item.position + 1 == 6">
|
||||
<div>
|
||||
<div class="item-name">{{ item.taskName }}</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div class="f-a-c">
|
||||
<div class="f-a-c">
|
||||
<div class="item-progress">
|
||||
<el-progress
|
||||
:percentage="parseInt(item.progress)"
|
||||
:show-text="false"
|
||||
:stroke-width="6"
|
||||
:color="stateData(item).progressColor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item-state"
|
||||
:style="{
|
||||
color: stateData(item).color,
|
||||
background: stateData(item).bgColor,
|
||||
}"
|
||||
>
|
||||
{{ stateData(item).text }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-link">
|
||||
<div
|
||||
:style="{
|
||||
width: widthConfig(item.position).width,
|
||||
marginLeft: widthConfig(item.position).margin,
|
||||
}"
|
||||
class="line"
|
||||
></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="item-progress">
|
||||
<div class="item-link">
|
||||
<div class="circle"></div>
|
||||
<div
|
||||
:style="{
|
||||
width: `${item.progress}%`,
|
||||
width: widthConfig(item.position).width,
|
||||
marginRight: widthConfig(item.position).margin,
|
||||
}"
|
||||
class="progress-content"
|
||||
>
|
||||
<div class="rocket">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/rocket.png"
|
||||
class="line"
|
||||
></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="item-name">{{ item.taskName }}</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div class="f-a-c" style="justify-content: flex-end">
|
||||
<div class="item-progress">
|
||||
<el-progress
|
||||
:percentage="parseInt(item.progress)"
|
||||
:show-text="false"
|
||||
:stroke-width="6"
|
||||
:color="stateData(item).progressColor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item-state"
|
||||
:style="{
|
||||
color: stateData(item).color,
|
||||
background: stateData(item).bgColor,
|
||||
}"
|
||||
>
|
||||
{{ stateData(item).text }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-text">{{ item.taskName }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<template v-if="index != stageProcessList.length - 1">
|
||||
<div
|
||||
class="gap"
|
||||
:style="{
|
||||
height: item.completionStatus !== '2' ? '48px' : '70px',
|
||||
}"
|
||||
>
|
||||
<!-- 虚线不可删除 -->
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-if="stageProcessList && stageProcessList.length"> </template>
|
||||
<template v-else>
|
||||
<el-empty description="暂无数据" />
|
||||
</template>
|
||||
</div>
|
||||
<!-- 开课列表弹框 -->
|
||||
<el-dialog
|
||||
top="120px"
|
||||
title="开课列表"
|
||||
v-model="openCourseVisible"
|
||||
style="
|
||||
min-height: 320px;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
"
|
||||
style="min-height: 320px; padding: 0; border-radius: 4px"
|
||||
width="80%"
|
||||
>
|
||||
<div style="width: 100%; min-height: 210px; margin-top: 12px">
|
||||
@@ -172,13 +213,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ReturnHead from "@/components/ReturnHead.vue";
|
||||
import { computed, reactive, onMounted, onUnmounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { computed, reactive, ref, watch, onMounted } from "vue";
|
||||
import { ElLoading } from "element-plus";
|
||||
import { useRequest, request } from "@/api/request";
|
||||
import { growthRequest } from "@/api/growthRequest";
|
||||
import { GROWTH, TASK_TYPES } from "@/api/CONST";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
EvaluationToLearn,
|
||||
QueryEvaluationTaskStatusOne,
|
||||
@@ -187,16 +225,21 @@ import {
|
||||
PROFESSIONAL_STUDENT_TASKLIST,
|
||||
PROFESSIONAL_STUDENT_LEARN,
|
||||
} from "@/api/api";
|
||||
import { useStore } from "vuex";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import store from "@/store";
|
||||
const { commit, dispatch, state } = useStore();
|
||||
import { ElMessage } from "element-plus";
|
||||
import ReturnHead from "@/components/ReturnHead.vue";
|
||||
import { GROWTH, TASK_TYPES } from "@/api/CONST";
|
||||
import dayjs from "dayjs";
|
||||
import { useStore } from "vuex";
|
||||
import { changeTime } from "@/api/method";
|
||||
const {
|
||||
query: { courseId, routerId, type, infoId, chapterOrStageId, id },
|
||||
} = useRoute();
|
||||
const router = useRouter();
|
||||
const { commit, dispatch, state } = useStore();
|
||||
// 专业力必修详情
|
||||
const data = computed(() => state.growthInfo);
|
||||
const userInfo = computed(() => store.state.userInfo);
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
type: 1,
|
||||
@@ -213,6 +256,31 @@ const tabClick = (type, status) => {
|
||||
getList();
|
||||
};
|
||||
|
||||
watch(data, () => {
|
||||
if (data.value.code === 6) {
|
||||
router.push({
|
||||
path: "/notpath",
|
||||
});
|
||||
}
|
||||
});
|
||||
// 学习任务列表
|
||||
const stageProcessList = ref([]);
|
||||
// 锚点跳转的次数
|
||||
const anchorNum = ref(0);
|
||||
onMounted(() => {
|
||||
updateWindowWidth(); // 初始化宽度
|
||||
window.addEventListener("resize", updateWindowWidth);
|
||||
dispatch("getGrowthInfo", { routerId, type });
|
||||
getList();
|
||||
});
|
||||
// 储存屏幕宽
|
||||
const windowWidth = ref(0);
|
||||
const transformSize = ref(1);
|
||||
|
||||
const updateWindowWidth = () => {
|
||||
windowWidth.value = window.innerWidth;
|
||||
transformSize.value = windowWidth.value / 414;
|
||||
};
|
||||
// 是否加载数据中
|
||||
const loading = ref(false);
|
||||
const getList = () => {
|
||||
@@ -221,21 +289,183 @@ const getList = () => {
|
||||
growthId: routerId,
|
||||
...queryParams,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
stageProcessList.value = res.data;
|
||||
let newData = res.data.slice(0, 15);
|
||||
// 默认第一个在第一点位
|
||||
let num = 15 / newData.length;
|
||||
stageProcessList.value = newData.map((item, index) => {
|
||||
// 默认第一个在第一点位
|
||||
if (index === 0) {
|
||||
item.position = 0;
|
||||
}
|
||||
item.position = Number((index * num).toFixed());
|
||||
return item;
|
||||
});
|
||||
|
||||
if (anchorNum.value === 0) {
|
||||
let find = stageProcessList.value.find((item) => item.lastStudy);
|
||||
if (find) {
|
||||
// var aLink = document.createElement("a");
|
||||
// aLink.href = `#${find.id}`; // 设置链接地址
|
||||
// aLink.click();
|
||||
// document.body.removeChild(aLink);
|
||||
}
|
||||
}
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
// 学习任务列表
|
||||
const stageProcessList = ref([]);
|
||||
onMounted(() => {
|
||||
dispatch("getGrowthInfo", { routerId, type });
|
||||
getList();
|
||||
});
|
||||
const openCourseVisible = ref(false);
|
||||
const openCourseList = ref([]);
|
||||
const openCourseIdList = ref([]);
|
||||
|
||||
const userInfo = computed(() => store.state.userInfo);
|
||||
|
||||
const point = [
|
||||
{
|
||||
top: "-15px",
|
||||
right: "57px",
|
||||
},
|
||||
{
|
||||
top: "51px",
|
||||
right: "106px",
|
||||
},
|
||||
{
|
||||
top: "132px",
|
||||
right: "-26px",
|
||||
},
|
||||
{
|
||||
top: "124px",
|
||||
right: "146px",
|
||||
},
|
||||
{
|
||||
top: "207px",
|
||||
right: "10px",
|
||||
},
|
||||
{
|
||||
top: "204px",
|
||||
right: "181px",
|
||||
},
|
||||
{
|
||||
top: "288px",
|
||||
left: "109px",
|
||||
},
|
||||
{
|
||||
top: "356px",
|
||||
left: "91px",
|
||||
},
|
||||
{
|
||||
top: "435px",
|
||||
left: "76px",
|
||||
},
|
||||
{
|
||||
top: "503px",
|
||||
left: "66px",
|
||||
},
|
||||
{
|
||||
top: "580px",
|
||||
left: "57px",
|
||||
},
|
||||
{
|
||||
top: "649px",
|
||||
left: "51px",
|
||||
},
|
||||
{
|
||||
top: "720px",
|
||||
left: "51px",
|
||||
},
|
||||
{
|
||||
top: "790px",
|
||||
left: "45px",
|
||||
},
|
||||
{
|
||||
top: "860px",
|
||||
left: "45px",
|
||||
},
|
||||
];
|
||||
// 基础配置项
|
||||
const widthConfig = computed(() => {
|
||||
return (index) => {
|
||||
if (index === 0) {
|
||||
return {
|
||||
width: "60px",
|
||||
margin: "19px",
|
||||
};
|
||||
} else if (index === 1) {
|
||||
return {
|
||||
width: "60px",
|
||||
margin: "19px",
|
||||
};
|
||||
} else if (index === 2) {
|
||||
return {
|
||||
width: "25px",
|
||||
margin: "0",
|
||||
};
|
||||
} else if (index === 3) {
|
||||
return {
|
||||
width: "30px",
|
||||
margin: "0px",
|
||||
};
|
||||
} else if (index === 4) {
|
||||
return {
|
||||
width: "25px",
|
||||
margin: "0",
|
||||
};
|
||||
} else if (index === 5) {
|
||||
return {
|
||||
width: "10px",
|
||||
margin: "0",
|
||||
};
|
||||
} else if (index === 6) {
|
||||
return {
|
||||
width: "50px",
|
||||
margin: "0",
|
||||
};
|
||||
} else if (index === 7) {
|
||||
return {
|
||||
width: "60px",
|
||||
margin: "0px",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: "70px",
|
||||
margin: "0px",
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
// 基础配置项
|
||||
const stateData = computed(() => {
|
||||
return (item) => {
|
||||
if (item.completionStatus === "10") {
|
||||
return {
|
||||
text: "未解锁",
|
||||
color: "#666666",
|
||||
bgColor: "rgba(102, 102, 102, 0.2)",
|
||||
progressColor: "#AEB3B8",
|
||||
};
|
||||
} else if (item.completionStatus === "0") {
|
||||
return {
|
||||
text: "未开始",
|
||||
color: "#666666",
|
||||
bgColor: "rgba(102, 102, 102, 0.2)",
|
||||
progressColor: "#AEB3B8",
|
||||
};
|
||||
} else if (item.completionStatus === "1") {
|
||||
return {
|
||||
text: "已完成",
|
||||
color: "#0077EC",
|
||||
bgColor: "rgba(0, 119, 236, 0.2)",
|
||||
progressColor: "#0077EC",
|
||||
};
|
||||
} else if (item.completionStatus === "2") {
|
||||
return {
|
||||
text: "进行中",
|
||||
color: "#F2903D",
|
||||
bgColor: "rgba(242, 144, 61, 0.2)",
|
||||
progressColor: "#F2903D",
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
async function toFinish(d) {
|
||||
if (d.completionStatus == 10) {
|
||||
ElMessage.warning("当前未解锁");
|
||||
@@ -484,104 +714,232 @@ function toOffcoursePlanPage(id) {
|
||||
"_top"
|
||||
);
|
||||
}
|
||||
const toPath = () => {
|
||||
router.push({
|
||||
path: "/growthDetails",
|
||||
query: {
|
||||
routerId,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.growth-path {
|
||||
min-height: 100vh;
|
||||
.f-a-c {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.growth-details {
|
||||
background-image: url(@/assets/image/growth/bg.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
|
||||
:deep(.el-dialog__body){
|
||||
padding-top: 0px;
|
||||
}
|
||||
.path-item {
|
||||
.item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.progress-content {
|
||||
position: relative;
|
||||
height: 15px;
|
||||
border-radius: 16px;
|
||||
height: 15px;
|
||||
background: linear-gradient(90deg, #fecd49 0%, #e13915 100%);
|
||||
.rocket {
|
||||
position: absolute;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
right: -18px;
|
||||
top: -11px;
|
||||
}
|
||||
}
|
||||
.item-progress {
|
||||
position: relative;
|
||||
height: 15px;
|
||||
border-radius: 16px;
|
||||
flex: 1;
|
||||
background: #ededed;
|
||||
margin-left: 6px;
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.item-text {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.gap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
div {
|
||||
height: 100%;
|
||||
border-left: 1px dashed #c5c6ca;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.path-container {
|
||||
padding: 28px;
|
||||
}
|
||||
.placeholder {
|
||||
height: 98px;
|
||||
}
|
||||
.nav {
|
||||
position: fixed;
|
||||
position: relative;
|
||||
.container {
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
background-image: url(@/assets/image/growth/path-bg.png);
|
||||
background-size: 100% 100%;
|
||||
top: 165px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 15px 15px 0 0;
|
||||
.path-container {
|
||||
position: relative;
|
||||
height: 935px;
|
||||
margin: 53px 45px 31px 63px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/assets/image/growth/path-arrow.png);
|
||||
background-size: 100%;
|
||||
.path-item-left {
|
||||
position: absolute;
|
||||
// width: 125px;
|
||||
|
||||
.item-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line {
|
||||
height: 2px;
|
||||
background: linear-gradient(-90deg, #ffffff 0%, #0077ec 65%);
|
||||
border-image: linear-gradient(-90deg, #ffffff, #0077ec) 10 10;
|
||||
}
|
||||
.circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #0077ec;
|
||||
}
|
||||
}
|
||||
.item-progress {
|
||||
width: 71px;
|
||||
}
|
||||
.item-state {
|
||||
width: 48px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.item-name {
|
||||
max-width: 125px;
|
||||
min-width: 40px;
|
||||
display: inline-block;
|
||||
background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
padding: 8px 5px 9px 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.triangle {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #4391f8;
|
||||
margin-left: 22px;
|
||||
}
|
||||
}
|
||||
.path-item-right {
|
||||
position: absolute;
|
||||
// width: 125px;
|
||||
display: flex;
|
||||
|
||||
.item-link {
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line {
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #ffffff 0%, #0077ec 65%);
|
||||
border-image: linear-gradient(0deg, #ffffff, #0077ec) 10 10;
|
||||
}
|
||||
.circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #0077ec;
|
||||
}
|
||||
}
|
||||
.item-progress {
|
||||
width: 71px;
|
||||
}
|
||||
.item-state {
|
||||
width: 48px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.item-name {
|
||||
max-width: 125px;
|
||||
min-width: 40px;
|
||||
display: inline-block;
|
||||
background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
padding: 8px 5px 9px 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.triangle {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #4391f8;
|
||||
margin-left: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
.search-input {
|
||||
flex: 1;
|
||||
}
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: none;
|
||||
padding-left: 18px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
padding: 12px 0 9px 0;
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
.nav-title {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.nav-left {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc(50% - 10px);
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
width: 80%;
|
||||
}
|
||||
:deep(.el-dialog__body) {
|
||||
padding-top: 0px;
|
||||
}
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
padding: 12px 0 14px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.tabs-item {
|
||||
width: 135px;
|
||||
color: #ffffff;
|
||||
margin: 0 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
font-size: 15px;
|
||||
opacity: 0.7;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tabs-line {
|
||||
width: 135px;
|
||||
height: 1px;
|
||||
margin-top: 2px;
|
||||
width: 39px;
|
||||
height: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.active {
|
||||
color: #2478ff;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
opacity: 1;
|
||||
.tabs-line {
|
||||
background-color: #61a4f9;
|
||||
background: #ffffff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user