|
|
<!--
|
|
|
* @Author: qinzhenpen qzp1807@126.com
|
|
|
* @Date: 2025-03-03 14:13:35
|
|
|
* @LastEditors: qinzhenpen qzp1807@126.com
|
|
|
* @LastEditTime: 2025-05-16 17:43:18
|
|
|
* @FilePath: \financial-big-data\src\components\Ai\index.vue
|
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="index app-container">
|
|
|
<el-card>
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span>我的成绩</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div class="Achievement Achievement1">
|
|
|
<div class="left">
|
|
|
<div>
|
|
|
<div class="AchievementChart" ref="AchievementChartRefs" style="width: 40rem; min-width: none; min-height: 300px"></div>
|
|
|
</div>
|
|
|
<div class="gradeDetails">
|
|
|
<div class="detalis-item">
|
|
|
<!-- <img src="../assets/images/旗帜.webp" alt="" /> -->
|
|
|
<label>成绩：</label>
|
|
|
<span>{{ scoreInfo.totalScore || 0 }}分</span>
|
|
|
</div>
|
|
|
<div class="detalis-item">
|
|
|
<!-- <img src="../assets/images/旗帜.webp" alt="" /> -->
|
|
|
<label>排名：</label>
|
|
|
<span>{{ scoreInfo.stuRank || "--" }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<el-table :data="tableData" stripe border style="width: 45rem">
|
|
|
<el-table-column type="index" label="序号" align="center" />
|
|
|
<el-table-column prop="model" label="项目" align="center" />
|
|
|
<el-table-column prop="scoce" label="成绩占比" align="center">
|
|
|
<template #default="scope">{{ scope.row.scoce }}%</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="address" label="成绩" align="center">
|
|
|
<template #default="scope">
|
|
|
{{ scope.row.address || 0 }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
<el-card style="margin-top: 10px">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span>我的成绩</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div class="Achievement">
|
|
|
<div class="left">
|
|
|
<div class="chartMain">
|
|
|
<div id="echart3" style="width: 45vw; height: 36.14vh"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<div class="timeContent">
|
|
|
<div class="activeTime">
|
|
|
<div class="ring">
|
|
|
<div class="ringIn">
|
|
|
<div class="ringText">
|
|
|
<div style="text-align: center; padding-top: 15px">
|
|
|
<div>
|
|
|
{{ totalTime || "0" }}
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div>HRS</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="profile">
|
|
|
<div class="num"></div>
|
|
|
<div class="text">有效时间</div>
|
|
|
<div class="text">有效学习时间的投入概况</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="detail">
|
|
|
<div id="echart2" style="width: 11.979vw; height: 21.296vh"></div>
|
|
|
<div class="timeList">
|
|
|
<div class="listItem">
|
|
|
<img src="@/assets/images/x1.png" alt="" />
|
|
|
<span>市场需求挖掘</span>
|
|
|
<span>{{ statistic.marketResearchTime || "0" }}分钟</span>
|
|
|
</div>
|
|
|
<div class="listItem">
|
|
|
<img src="@/assets/images/x2.png" alt="" />
|
|
|
<span>产品规划</span>
|
|
|
<span>{{ statistic.productPlanningTime || "0" }}分钟</span>
|
|
|
</div>
|
|
|
<div class="listItem">
|
|
|
<img src="@/assets/images/x3.png" alt="" />
|
|
|
<span>产品投放测试</span>
|
|
|
<span>{{ statistic.productLaunchTestTime || "0" }}分钟</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="listItem">
|
|
|
<img src="@/assets/images/x4.png" alt="" />
|
|
|
<span>供应渠道管理</span>
|
|
|
<span>{{ statistic.supplyChannelTime || "0" }}分钟</span>
|
|
|
</div>
|
|
|
<div class="listItem">
|
|
|
<img src="@/assets/images/x5.png" alt="" />
|
|
|
<span>产品评估与考核</span>
|
|
|
<span>{{ statistic.productEvaluationTime || "0" }} 分钟</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import useUserStore from "@/store/modules/user";
|
|
|
const userStore = useUserStore();
|
|
|
import * as echarts from "echarts";
|
|
|
import * as indexApi from "@/api/index";
|
|
|
const AchievementChartRefs = ref(null);
|
|
|
const statistic = ref({});
|
|
|
const scoreTrend = ref([
|
|
|
{
|
|
|
title: "我",
|
|
|
scores: [0, 0, 0, 0, 0],
|
|
|
times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
|
|
|
},
|
|
|
{
|
|
|
title: "第一名",
|
|
|
scores: [0, 0, 0, 0, 0],
|
|
|
times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
|
|
|
},
|
|
|
{
|
|
|
title: "最后一名",
|
|
|
scores: [0, 0, 0, 0, 0],
|
|
|
times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
|
|
|
},
|
|
|
]);
|
|
|
const list = ref([]);
|
|
|
const tableData = ref([
|
|
|
{
|
|
|
date: "2016-05-03",
|
|
|
model: "市场需求挖掘",
|
|
|
address: "20",
|
|
|
scoce: "20",
|
|
|
key: "oneScore",
|
|
|
key1: "oneWeight",
|
|
|
},
|
|
|
{
|
|
|
date: "2016-05-02",
|
|
|
model: "产品规划",
|
|
|
address: "20",
|
|
|
scoce: "20",
|
|
|
key: "twoScore",
|
|
|
key1: "twoWeight",
|
|
|
},
|
|
|
{
|
|
|
date: "2016-05-04",
|
|
|
model: "产品投放测试",
|
|
|
scoce: "20",
|
|
|
address: "20",
|
|
|
key: "threeScore",
|
|
|
key1: "threeWeight",
|
|
|
},
|
|
|
{
|
|
|
date: "2016-05-01",
|
|
|
model: "供应渠道管理",
|
|
|
address: "20",
|
|
|
scoce: "20",
|
|
|
key: "fourScore",
|
|
|
key1: "fourWeight",
|
|
|
},
|
|
|
{
|
|
|
date: "2016-05-01",
|
|
|
model: "产品评估与考核",
|
|
|
address: "20",
|
|
|
scoce: "15",
|
|
|
key: "fiveScore",
|
|
|
key1: "fiveWeight",
|
|
|
},
|
|
|
]);
|
|
|
const corList = ["#795ef3", "#419af2", "#f7b844", "red", "pink"];
|
|
|
const scoreInfo = ref({});
|
|
|
const timeKey = ref({
|
|
|
marketResearchTime: 0,
|
|
|
productPlanningTime: 0,
|
|
|
productLaunchTestTime: 0,
|
|
|
supplyChannelTime: 0,
|
|
|
productEvaluationTime: 0,
|
|
|
});
|
|
|
// 时间总和
|
|
|
const totalTime = computed(() => {
|
|
|
let time = 0;
|
|
|
for (let key in timeKey.value) {
|
|
|
time += timeKey.value[key];
|
|
|
}
|
|
|
return time;
|
|
|
});
|
|
|
const getgrade = () => {
|
|
|
let myChart = echarts.init(AchievementChartRefs.value);
|
|
|
let option;
|
|
|
option = {
|
|
|
legend: {
|
|
|
orient: "vertical",
|
|
|
right: 30,
|
|
|
top: "40%",
|
|
|
bottom: 20,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "Access From",
|
|
|
type: "pie",
|
|
|
radius: "80%",
|
|
|
center: ["35%", "50%"],
|
|
|
data: list.value,
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
option && myChart.setOption(option);
|
|
|
// 添加窗口大小变化监听
|
|
|
const handleResize = () => {
|
|
|
myChart.resize();
|
|
|
};
|
|
|
window.addEventListener("resize", handleResize);
|
|
|
// 在组件卸载时移除监听（Vue 3 示例）
|
|
|
onUnmounted(() => {
|
|
|
window.removeEventListener("resize", handleResize);
|
|
|
myChart.dispose(); // 清理图表实例
|
|
|
});
|
|
|
};
|
|
|
const echart3Init = () => {
|
|
|
var chartDom = document.getElementById("echart3");
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
console.log(userStore.userInfo, "userStore.userInfo");
|
|
|
var option;
|
|
|
option = {
|
|
|
// title: {
|
|
|
// text: "Stacked Area Chart"
|
|
|
// },
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "cross",
|
|
|
label: {
|
|
|
backgroundColor: "#6a7985",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["第一名", "我的成绩", "最后一名"],
|
|
|
top: 10,
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
left: "3%",
|
|
|
right: "4%",
|
|
|
bottom: "3%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: false,
|
|
|
data: scoreTrend.value[0].times,
|
|
|
// data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "最后一名",
|
|
|
type: "line",
|
|
|
// stack: "Total",
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
type: "linear",
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(66,209,216,0.6)", // 0% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgba(255,255,255,0)", // 100% 处的颜色
|
|
|
},
|
|
|
],
|
|
|
global: false, // 缺省为 false
|
|
|
},
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: "#42D1D8",
|
|
|
},
|
|
|
itemStyle: {
|
|
|
color: "#42D1D8",
|
|
|
},
|
|
|
emphasis: {
|
|
|
focus: "series",
|
|
|
},
|
|
|
data: scoreTrend.value[2].scores,
|
|
|
// data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
},
|
|
|
{
|
|
|
name: "我的成绩",
|
|
|
type: "line",
|
|
|
// stack: "Total",
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
type: "linear",
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(133,64,251,0.6)", // 0% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgba(255,255,255,0)", // 100% 处的颜色
|
|
|
},
|
|
|
],
|
|
|
global: false, // 缺省为 false
|
|
|
},
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: "#8540FB",
|
|
|
},
|
|
|
itemStyle: {
|
|
|
color: "#8540FB",
|
|
|
},
|
|
|
emphasis: {
|
|
|
focus: "series",
|
|
|
},
|
|
|
data: scoreTrend.value[0].scores,
|
|
|
// data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
},
|
|
|
{
|
|
|
name: "第一名",
|
|
|
type: "line",
|
|
|
// stack: "Total",
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
type: "linear",
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(255,185,0,0.6)", // 0% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgba(255,255,255,0)", // 100% 处的颜色
|
|
|
},
|
|
|
],
|
|
|
global: false, // 缺省为 false
|
|
|
},
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: "#FFB900",
|
|
|
},
|
|
|
itemStyle: {
|
|
|
color: "#FFB900",
|
|
|
},
|
|
|
emphasis: {
|
|
|
focus: "series",
|
|
|
},
|
|
|
data: scoreTrend.value[1].scores,
|
|
|
// data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
option && myChart.setOption(option);
|
|
|
// 添加窗口大小变化监听
|
|
|
const handleResize = () => {
|
|
|
myChart.resize();
|
|
|
};
|
|
|
window.addEventListener("resize", handleResize);
|
|
|
// 在组件卸载时移除监听（Vue 3 示例）
|
|
|
onUnmounted(() => {
|
|
|
window.removeEventListener("resize", handleResize);
|
|
|
myChart.dispose(); // 清理图表实例
|
|
|
});
|
|
|
};
|
|
|
const echart2Init = () => {
|
|
|
var chartDom = document.getElementById("echart2");
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
var option;
|
|
|
option = {
|
|
|
title: {
|
|
|
text: "时间占比",
|
|
|
left: "center",
|
|
|
top: "center",
|
|
|
textStyle: {
|
|
|
fontSize: 14,
|
|
|
fontWeight: "normal",
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
},
|
|
|
legend: {
|
|
|
top: "5%",
|
|
|
left: "center",
|
|
|
show: false,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "时间占比",
|
|
|
type: "pie",
|
|
|
radius: ["40%", "70%"],
|
|
|
avoidLabelOverlap: false,
|
|
|
label: {
|
|
|
show: false,
|
|
|
position: "center",
|
|
|
},
|
|
|
emphasis: {
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// formatter: '时间占比'
|
|
|
// // fontSize: 40,
|
|
|
// // fontWeight: "bold"
|
|
|
// }
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: [
|
|
|
{ value: 0, name: "收益与风险" },
|
|
|
{ value: 0, name: "现值和价值评估" },
|
|
|
{ value: 0, name: "投资决策" },
|
|
|
{ value: 0, name: "融资决策" },
|
|
|
{ value: 0, name: "营运资本管理" },
|
|
|
{ value: 0, name: "财务分析及估值" },
|
|
|
{ value: 0, name: "财务预警及风险管理" },
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
option && myChart.setOption(option);
|
|
|
};
|
|
|
const getScoreTrend = () => {
|
|
|
indexApi
|
|
|
.getRouters({
|
|
|
userId: userStore.userInfo.userId,
|
|
|
classId: userStore.userInfo.classId,
|
|
|
schoolId: userStore.userInfo.schoolId,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if(!res.data) return;
|
|
|
scoreTrend.value = res.data;
|
|
|
echart3Init();
|
|
|
});
|
|
|
};
|
|
|
// 查询学生权重
|
|
|
const getwight = () => {
|
|
|
indexApi
|
|
|
.getStuWeightScore({
|
|
|
userId: userStore.userInfo.userId,
|
|
|
classId: userStore.userInfo.classId,
|
|
|
schoolId: userStore.userInfo.schoolId,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (!res.data) return;
|
|
|
scoreInfo.value = res.data ;
|
|
|
tableData.value.forEach((item) => {
|
|
|
item.scoce = res.data[item.key1] * 100;
|
|
|
item.address = res.data[item.key];
|
|
|
});
|
|
|
list.value = tableData.value.map((item, index) => ({
|
|
|
name: item.model,
|
|
|
value: [item.address],
|
|
|
itemStyle: { color: corList[index] },
|
|
|
}));
|
|
|
console.log(list.value, "list");
|
|
|
getgrade();
|
|
|
});
|
|
|
};
|
|
|
// 查看学习时间
|
|
|
const getStudyTime = () => {
|
|
|
indexApi
|
|
|
.getStudyTime({
|
|
|
userId: userStore.userInfo.userId,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (!res.data) return;
|
|
|
statistic.value = res.data;
|
|
|
Object.keys(res.data).forEach((key) => {
|
|
|
if (key in timeKey.value) {
|
|
|
timeKey.value[key] = res.data[key];
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
getwight();
|
|
|
getScoreTrend();
|
|
|
getStudyTime();
|
|
|
echart2Init();
|
|
|
console.log(userStore.userInfo, "54455445");
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.app-container {
|
|
|
background: #fff;
|
|
|
}
|
|
|
.index {
|
|
|
height: calc(100vh - 70px);
|
|
|
// padding: 20px 40px;
|
|
|
.Achievement {
|
|
|
display: flex;
|
|
|
.left {
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
.AchievementChart {
|
|
|
border-right: 2px dashed #e4e7ed;
|
|
|
}
|
|
|
.gradeDetails {
|
|
|
padding-left: 20px;
|
|
|
.detalis-item {
|
|
|
label {
|
|
|
display: inline-block;
|
|
|
width: 3rem !important;
|
|
|
margin-left: 0.8rem;
|
|
|
}
|
|
|
span {
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
color: #3c38b8;
|
|
|
}
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.right {
|
|
|
padding-top: 20px;
|
|
|
// float: right;
|
|
|
.timeContent {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.detail {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 15px;
|
|
|
height: 31vh;
|
|
|
border-radius: 10px;
|
|
|
border: 1px solid #3c38b8;
|
|
|
margin-left: 10px;
|
|
|
padding: 10px;
|
|
|
.listItem {
|
|
|
width: 13vw;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-right: 30px;
|
|
|
position: relative;
|
|
|
span {
|
|
|
margin-top: -10px;
|
|
|
}
|
|
|
span:nth-of-type(2) {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
color: #3c38b8;
|
|
|
font-weight: bold;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.activeTime {
|
|
|
width: 160px;
|
|
|
min-width: 160px;
|
|
|
// width: 8.333vw;
|
|
|
height: 240px;
|
|
|
background: url("@/assets/images/有效时间.png");
|
|
|
background-size: 160px 240px;
|
|
|
margin-top: 15px;
|
|
|
padding-top: 20px;
|
|
|
.ring {
|
|
|
margin: 0 auto;
|
|
|
width: 100px;
|
|
|
height: 100px;
|
|
|
background: #b2d6fb;
|
|
|
border-radius: 50%;
|
|
|
padding-top: 4px;
|
|
|
.ringIn {
|
|
|
width: 92px;
|
|
|
height: 92px;
|
|
|
background: #64acf8;
|
|
|
border-radius: 50%;
|
|
|
margin-left: 4px;
|
|
|
padding-top: 7px;
|
|
|
.ringText {
|
|
|
width: 78px;
|
|
|
height: 78px;
|
|
|
background: #fff;
|
|
|
border-radius: 50%;
|
|
|
margin-left: 7px;
|
|
|
font-weight: bold;
|
|
|
font-size: 17px;
|
|
|
color: #3c38b8;
|
|
|
.line {
|
|
|
width: 50px;
|
|
|
height: 1px;
|
|
|
border-bottom: 1px solid #4568ee;
|
|
|
margin: 0 auto;
|
|
|
margin-bottom: 3px;
|
|
|
margin-top: 3px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.profile {
|
|
|
text-align: center;
|
|
|
margin-top: 10px;
|
|
|
margin: 0px 5px;
|
|
|
.num {
|
|
|
font-weight: bold;
|
|
|
font-size: 35px;
|
|
|
color: #ffeec0;
|
|
|
height: 35px;
|
|
|
}
|
|
|
.text {
|
|
|
color: #fff;
|
|
|
line-height: 23px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.Achievement1 {
|
|
|
display: flex;
|
|
|
.left {
|
|
|
display: flex;
|
|
|
.AchievementChart {
|
|
|
border-right: 2px dashed #e4e7ed;
|
|
|
}
|
|
|
.gradeDetails {
|
|
|
padding-left: 20px;
|
|
|
.detalis-item {
|
|
|
label {
|
|
|
display: inline-block;
|
|
|
width: 3rem !important;
|
|
|
margin-left: 0.8rem;
|
|
|
}
|
|
|
span {
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
color: #3c38b8;
|
|
|
}
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |