|
@@ -63,7 +63,7 @@
|
|
|
<view class="progress-item df fdr aic">
|
|
<view class="progress-item df fdr aic">
|
|
|
<view class="progress-box">
|
|
<view class="progress-box">
|
|
|
<progress :percent=SJKC_P activeColor="#d6ebbf" active stroke-width="8" />
|
|
<progress :percent=SJKC_P activeColor="#d6ebbf" active stroke-width="8" />
|
|
|
- </view>
|
|
|
|
|
|
|
+ </view>
|
|
|
<view class="progress-text">{{SJKC_P}}%</view>
|
|
<view class="progress-text">{{SJKC_P}}%</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="progress-item df fdr aic">
|
|
<view class="progress-item df fdr aic">
|
|
@@ -120,12 +120,25 @@
|
|
|
<th>{{model.Score_xnyscz>=10?'是':'否'}}</th>
|
|
<th>{{model.Score_xnyscz>=10?'是':'否'}}</th>
|
|
|
<th>{{model.Score_xnyscz>0?model.Score_xnyscz:'0'}}</th>
|
|
<th>{{model.Score_xnyscz>0?model.Score_xnyscz:'0'}}</th>
|
|
|
</tr>
|
|
</tr>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <th>教师评分</th>
|
|
|
|
|
+ <th></th>
|
|
|
|
|
+ <th></th>
|
|
|
|
|
+ <!-- <th v-show="isShow_jspf">{{model.Score_jspf>0?model.Score_jspf:'0'}}</th> -->
|
|
|
|
|
+ <th class=" df aic jcc">
|
|
|
|
|
+ <view>
|
|
|
|
|
+ <view v-show="isShow_jspf" class=" input-jspf">{{model.Score_jspf>0?model.Score_jspf:'0'}}</view>
|
|
|
|
|
+ <input v-show="!isShow_jspf" class=" input-jspf" v-model="model.Score_jspf" placeholder="请输入分数" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </th>
|
|
|
|
|
+ </tr>
|
|
|
</tbody>
|
|
</tbody>
|
|
|
</table>
|
|
</table>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="btn-box df fdr aic jcc">
|
|
<view class="btn-box df fdr aic jcc">
|
|
|
- <view class="btn-submit df aic jcc">成绩添加与修改</view>
|
|
|
|
|
|
|
+ <view class="btn-submit df aic jcc" @click="onClick_jspf(0)" v-show="isShow_jspf">成绩添加与修改</view>
|
|
|
|
|
+ <view class="btn-submit df aic jcc" @click="onClick_jspf(1)" v-show="!isShow_jspf">确定</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -134,27 +147,28 @@
|
|
|
<script>
|
|
<script>
|
|
|
import uCharts from '@/components/u-charts/u-charts.js';
|
|
import uCharts from '@/components/u-charts/u-charts.js';
|
|
|
var _self;
|
|
var _self;
|
|
|
- var canvaRadar=null;
|
|
|
|
|
|
|
+ var canvaRadar = null;
|
|
|
export default {
|
|
export default {
|
|
|
components: {
|
|
components: {
|
|
|
uCharts
|
|
uCharts
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- cWidth:'',
|
|
|
|
|
- cHeight:'',
|
|
|
|
|
- pixelRatio:1,
|
|
|
|
|
- textarea:'',
|
|
|
|
|
|
|
+ cWidth: '',
|
|
|
|
|
+ cHeight: '',
|
|
|
|
|
+ pixelRatio: 1,
|
|
|
|
|
+ textarea: '',
|
|
|
//0添加1个人
|
|
//0添加1个人
|
|
|
showIndex_userInfo: 1,
|
|
showIndex_userInfo: 1,
|
|
|
sexIndex: 0,
|
|
sexIndex: 0,
|
|
|
zjIndex: 0,
|
|
zjIndex: 0,
|
|
|
mzIndex: 0,
|
|
mzIndex: 0,
|
|
|
//学习进度
|
|
//学习进度
|
|
|
- YLRZ_P:0,
|
|
|
|
|
- SJKC_P:0,
|
|
|
|
|
- XNSY_P:0,
|
|
|
|
|
-
|
|
|
|
|
|
|
+ YLRZ_P: 0,
|
|
|
|
|
+ SJKC_P: 0,
|
|
|
|
|
+ XNSY_P: 0,
|
|
|
|
|
+ isShow_jspf: true,
|
|
|
|
|
+
|
|
|
model: {
|
|
model: {
|
|
|
"Name": "", //姓名
|
|
"Name": "", //姓名
|
|
|
"Class": "", //班级
|
|
"Class": "", //班级
|
|
@@ -163,29 +177,30 @@
|
|
|
"Score_sjkc": null, //实景勘察分数
|
|
"Score_sjkc": null, //实景勘察分数
|
|
|
"Score_xnjsdj": null, //虚拟技术搭建分数
|
|
"Score_xnjsdj": null, //虚拟技术搭建分数
|
|
|
"Score_xnyscz": null, //虚拟艺术创作分数
|
|
"Score_xnyscz": null, //虚拟艺术创作分数
|
|
|
|
|
+ "Score_jspf": null, //教师评分
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
array_sex: ['男', '女'],
|
|
array_sex: ['男', '女'],
|
|
|
array_zj: ['身份证', '护照'],
|
|
array_zj: ['身份证', '护照'],
|
|
|
array_mz: ['汉族', '少数民族'],
|
|
array_mz: ['汉族', '少数民族'],
|
|
|
- testResults:['原理认知', '实景勘察', '虚拟技术搭建', '虚拟艺术创作']
|
|
|
|
|
|
|
+ testResults: ['原理认知', '实景勘察', '虚拟技术搭建', '虚拟艺术创作']
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
_self = this;
|
|
_self = this;
|
|
|
//#ifdef MP-ALIPAY
|
|
//#ifdef MP-ALIPAY
|
|
|
uni.getSystemInfo({
|
|
uni.getSystemInfo({
|
|
|
- success: function (res) {
|
|
|
|
|
- if(res.pixelRatio>1){
|
|
|
|
|
|
|
+ success: function(res) {
|
|
|
|
|
+ if (res.pixelRatio > 1) {
|
|
|
//正常这里给2就行,如果pixelRatio=3性能会降低一点
|
|
//正常这里给2就行,如果pixelRatio=3性能会降低一点
|
|
|
//_self.pixelRatio =res.pixelRatio;
|
|
//_self.pixelRatio =res.pixelRatio;
|
|
|
- _self.pixelRatio =2;
|
|
|
|
|
|
|
+ _self.pixelRatio = 2;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
//#endif
|
|
//#endif
|
|
|
- this.cWidth=uni.upx2px(900);
|
|
|
|
|
- this.cHeight=uni.upx2px(900);
|
|
|
|
|
|
|
+ this.cWidth = uni.upx2px(900);
|
|
|
|
|
+ this.cHeight = uni.upx2px(900);
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
//点击添加个人信息
|
|
//点击添加个人信息
|
|
@@ -207,133 +222,142 @@
|
|
|
this.model.Name = data.Name;
|
|
this.model.Name = data.Name;
|
|
|
this.model.Class = data.Class;
|
|
this.model.Class = data.Class;
|
|
|
this.model.StudentID = data.StudentID;
|
|
this.model.StudentID = data.StudentID;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
userController.data_scores = data.UserScore;
|
|
userController.data_scores = data.UserScore;
|
|
|
- this.model.Score_ylrz=userController.getScore_ylrz();
|
|
|
|
|
- this.model.Score_sjkc=userController.getScore_sjck();
|
|
|
|
|
- this.model.Score_xnjsdj=userController.getScore_xnjsdj();
|
|
|
|
|
- this.model.Score_xnyscz=userController.getScore_xnyscz();
|
|
|
|
|
|
|
+ this.model.Score_ylrz = userController.getScore_ylrz();
|
|
|
|
|
+ this.model.Score_sjkc = userController.getScore_sjck();
|
|
|
|
|
+ this.model.Score_xnjsdj = userController.getScore_xnjsdj();
|
|
|
|
|
+ this.model.Score_xnyscz = userController.getScore_xnyscz();
|
|
|
|
|
+ this.model.Score_jspf = userController.getScore_jspf();
|
|
|
},
|
|
},
|
|
|
updateLearnProgress(data) {
|
|
updateLearnProgress(data) {
|
|
|
- if( data[0].Score!=-1)
|
|
|
|
|
- {
|
|
|
|
|
- this.YLRZ_P = parseInt(data[0].Score/10*100);
|
|
|
|
|
|
|
+ if (data[0].Score != -1) {
|
|
|
|
|
+ this.YLRZ_P = parseInt(data[0].Score / 10 * 100);
|
|
|
}
|
|
}
|
|
|
- if( data[1].Score!=-1)
|
|
|
|
|
- {
|
|
|
|
|
- this.SJKC_P = parseInt(data[1].Score/5*100);
|
|
|
|
|
|
|
+ if (data[1].Score != -1) {
|
|
|
|
|
+ this.SJKC_P = parseInt(data[1].Score / 5 * 100);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
let totalScore = 0;
|
|
let totalScore = 0;
|
|
|
- for(let i=2;i<16;i++)
|
|
|
|
|
- {
|
|
|
|
|
- if(data[i].Score!=-1)
|
|
|
|
|
- {
|
|
|
|
|
|
|
+ for (let i = 2; i < 16; i++) {
|
|
|
|
|
+ if (data[i].Score != -1) {
|
|
|
totalScore++;
|
|
totalScore++;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- this.XNSY_P = parseInt(totalScore/14*100);
|
|
|
|
|
-
|
|
|
|
|
|
|
+ this.XNSY_P = parseInt(totalScore / 14 * 100);
|
|
|
|
|
+
|
|
|
//五维图
|
|
//五维图
|
|
|
- let aData= [];
|
|
|
|
|
|
|
+ let aData = [];
|
|
|
let miniPoint = 0;
|
|
let miniPoint = 0;
|
|
|
//原理认知
|
|
//原理认知
|
|
|
- if(data[0].Score=='-1')
|
|
|
|
|
- {
|
|
|
|
|
|
|
+ if (data[0].Score == '-1') {
|
|
|
aData.push(miniPoint);
|
|
aData.push(miniPoint);
|
|
|
- }
|
|
|
|
|
- else{
|
|
|
|
|
|
|
+ } else {
|
|
|
aData.push(parseInt(data[0].Score));
|
|
aData.push(parseInt(data[0].Score));
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
//实景考察
|
|
//实景考察
|
|
|
- if(data[1].Score=='-1')
|
|
|
|
|
- {
|
|
|
|
|
|
|
+ if (data[1].Score == '-1') {
|
|
|
aData.push(miniPoint);
|
|
aData.push(miniPoint);
|
|
|
- }
|
|
|
|
|
- else{
|
|
|
|
|
|
|
+ } else {
|
|
|
aData.push(parseInt(data[1].Score));
|
|
aData.push(parseInt(data[1].Score));
|
|
|
}
|
|
}
|
|
|
//虚拟技术搭建
|
|
//虚拟技术搭建
|
|
|
let XNJSDJ_score = 0;
|
|
let XNJSDJ_score = 0;
|
|
|
- for(let i=2;i<5;i++)
|
|
|
|
|
- {
|
|
|
|
|
- if(data[i].Score!='-1')
|
|
|
|
|
- {
|
|
|
|
|
- XNJSDJ_score+=parseInt(data[i].Score);
|
|
|
|
|
|
|
+ for (let i = 2; i < 5; i++) {
|
|
|
|
|
+ if (data[i].Score != '-1') {
|
|
|
|
|
+ XNJSDJ_score += parseInt(data[i].Score);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- // = parseInt(data[3])+parseInt(data[4])+parseInt(data[5]);
|
|
|
|
|
|
|
+ // = parseInt(data[3])+parseInt(data[4])+parseInt(data[5]);
|
|
|
aData.push(XNJSDJ_score);
|
|
aData.push(XNJSDJ_score);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
//虚拟艺术创作
|
|
//虚拟艺术创作
|
|
|
// let XNYSCZ_score = parseInt(data[6])+parseInt(data[7])+parseInt(data[8])+parseInt(data[9])+parseInt(data[10])+parseInt(data[11])+parseInt(data[12])+parseInt(data[13])+parseInt(data[14])+parseInt(data[15]);
|
|
// let XNYSCZ_score = parseInt(data[6])+parseInt(data[7])+parseInt(data[8])+parseInt(data[9])+parseInt(data[10])+parseInt(data[11])+parseInt(data[12])+parseInt(data[13])+parseInt(data[14])+parseInt(data[15]);
|
|
|
let XNYSCZ_score = 0;
|
|
let XNYSCZ_score = 0;
|
|
|
- for(let i=6;i<15;i++)
|
|
|
|
|
- {
|
|
|
|
|
- if(data[i].Score!='-1')
|
|
|
|
|
- {
|
|
|
|
|
- XNYSCZ_score+=parseInt(data[i].Score);
|
|
|
|
|
|
|
+ for (let i = 6; i < 15; i++) {
|
|
|
|
|
+ if (data[i].Score != '-1') {
|
|
|
|
|
+ XNYSCZ_score += parseInt(data[i].Score);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
aData.push(XNYSCZ_score);
|
|
aData.push(XNYSCZ_score);
|
|
|
// console.log('data=',data);
|
|
// console.log('data=',data);
|
|
|
//教师评分(加分项目)
|
|
//教师评分(加分项目)
|
|
|
- if(data[15].Score=='-1')
|
|
|
|
|
- {
|
|
|
|
|
|
|
+ if (data[15].Score == '-1') {
|
|
|
aData.push(miniPoint);
|
|
aData.push(miniPoint);
|
|
|
- }
|
|
|
|
|
- else{
|
|
|
|
|
|
|
+ } else {
|
|
|
aData.push(parseInt(data[15].Score));
|
|
aData.push(parseInt(data[15].Score));
|
|
|
}
|
|
}
|
|
|
// aData.push(parseInt(data[16]));
|
|
// aData.push(parseInt(data[16]));
|
|
|
- console.log('aData=',aData)
|
|
|
|
|
-
|
|
|
|
|
|
|
+ console.log('aData=', aData)
|
|
|
|
|
+
|
|
|
this.getServerData(aData);
|
|
this.getServerData(aData);
|
|
|
},
|
|
},
|
|
|
- getServerData(aData){
|
|
|
|
|
|
|
+ getServerData(aData) {
|
|
|
// let data = {"categories":["维度1","维度2","维度3","维度4","维度5","维度6"],"series":[{"name":"成交量1","data":[90,110,165,195,187,172]},{"name":"成交量2","data":[190,210,105,35,27,102]}]}
|
|
// let data = {"categories":["维度1","维度2","维度3","维度4","维度5","维度6"],"series":[{"name":"成交量1","data":[90,110,165,195,187,172]},{"name":"成交量2","data":[190,210,105,35,27,102]}]}
|
|
|
// let data = {"categories":["原理认知","实景勘察","虚拟技术搭建","虚拟艺术创作","教师评分(加分项目)"],"series":[{"name":"成绩分布","data":[90,110,165,195,187]}]}
|
|
// let data = {"categories":["原理认知","实景勘察","虚拟技术搭建","虚拟艺术创作","教师评分(加分项目)"],"series":[{"name":"成绩分布","data":[90,110,165,195,187]}]}
|
|
|
// let data = {"categories":["维度1","维度2","维度3"],"series":[{"name":"成交量1","data":[90,110,165,195,187,172]}]}
|
|
// let data = {"categories":["维度1","维度2","维度3"],"series":[{"name":"成交量1","data":[90,110,165,195,187,172]}]}
|
|
|
- let data = {"categories":["原理认知","实景考察","虚拟技术搭建","虚拟艺术创作","教师评分(加分项目)"],"series":[{"name":"成绩分布","data":aData}]}
|
|
|
|
|
- _self.showRadar("canvasRadar",data);
|
|
|
|
|
|
|
+ let data = {
|
|
|
|
|
+ "categories": ["原理认知", "实景考察", "虚拟技术搭建", "虚拟艺术创作", "教师评分(加分项目)"],
|
|
|
|
|
+ "series": [{
|
|
|
|
|
+ "name": "成绩分布",
|
|
|
|
|
+ "data": aData
|
|
|
|
|
+ }]
|
|
|
|
|
+ }
|
|
|
|
|
+ _self.showRadar("canvasRadar", data);
|
|
|
},
|
|
},
|
|
|
- showRadar(canvasId,chartData){
|
|
|
|
|
- canvaRadar=new uCharts({
|
|
|
|
|
- $this:_self,
|
|
|
|
|
|
|
+ showRadar(canvasId, chartData) {
|
|
|
|
|
+ canvaRadar = new uCharts({
|
|
|
|
|
+ $this: _self,
|
|
|
canvasId: canvasId,
|
|
canvasId: canvasId,
|
|
|
type: 'radar',
|
|
type: 'radar',
|
|
|
- fontSize:11,
|
|
|
|
|
- padding:[15,15,0,15],
|
|
|
|
|
- legend:{
|
|
|
|
|
- show:true,
|
|
|
|
|
- padding:5,
|
|
|
|
|
- lineHeight:11,
|
|
|
|
|
- margin:0,
|
|
|
|
|
|
|
+ fontSize: 11,
|
|
|
|
|
+ padding: [15, 15, 0, 15],
|
|
|
|
|
+ legend: {
|
|
|
|
|
+ show: true,
|
|
|
|
|
+ padding: 5,
|
|
|
|
|
+ lineHeight: 11,
|
|
|
|
|
+ margin: 0,
|
|
|
},
|
|
},
|
|
|
- background:'#FFFFFF',
|
|
|
|
|
- pixelRatio:_self.pixelRatio,
|
|
|
|
|
|
|
+ background: '#FFFFFF',
|
|
|
|
|
+ pixelRatio: _self.pixelRatio,
|
|
|
animation: true,
|
|
animation: true,
|
|
|
dataLabel: true,
|
|
dataLabel: true,
|
|
|
categories: chartData.categories,
|
|
categories: chartData.categories,
|
|
|
series: chartData.series,
|
|
series: chartData.series,
|
|
|
- width: _self.cWidth*_self.pixelRatio,
|
|
|
|
|
- height: _self.cHeight*_self.pixelRatio,
|
|
|
|
|
|
|
+ width: _self.cWidth * _self.pixelRatio,
|
|
|
|
|
+ height: _self.cHeight * _self.pixelRatio,
|
|
|
extra: {
|
|
extra: {
|
|
|
radar: {
|
|
radar: {
|
|
|
- max: 200,//雷达数值的最大值
|
|
|
|
|
- gridType:'radar'//radar或者circle可选,网格样式,默认radar
|
|
|
|
|
|
|
+ max: 200, //雷达数值的最大值
|
|
|
|
|
+ gridType: 'radar' //radar或者circle可选,网格样式,默认radar
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
|
|
+ //成绩添加与修改----教师评分
|
|
|
|
|
+ onClick_jspf(type) {
|
|
|
|
|
+ //点击“成绩添加与修改”
|
|
|
|
|
+ if (type == 0) {
|
|
|
|
|
+ this.isShow_jspf = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ //点击"确定"
|
|
|
|
|
+ else {
|
|
|
|
|
+ this.isShow_jspf = true;
|
|
|
|
|
+ userController.setupScore_jspf(this.model.Score_jspf,function(res){
|
|
|
|
|
+ // console.log("请求分数成功",res);
|
|
|
|
|
+ alert("修改成功");
|
|
|
|
|
+ },function(res){
|
|
|
|
|
+ // console.log("请求分数失败",res);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
-
|
|
|
|
|
.user-full {
|
|
.user-full {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
@@ -428,21 +452,27 @@
|
|
|
// margin-bottom: px2vw(44);
|
|
// margin-bottom: px2vw(44);
|
|
|
width: px2vw(1377);
|
|
width: px2vw(1377);
|
|
|
}
|
|
}
|
|
|
- .box2-table-box-cjfb{
|
|
|
|
|
- display: flex;/*父元素设置flex属性*/
|
|
|
|
|
- justify-content: center;/*水平主轴居中*/
|
|
|
|
|
- align-items: center;/*垂直交叉轴居中*/
|
|
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .box2-table-box-cjfb {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ /*父元素设置flex属性*/
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ /*水平主轴居中*/
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ /*垂直交叉轴居中*/
|
|
|
|
|
+
|
|
|
width: px2vw(1377);
|
|
width: px2vw(1377);
|
|
|
height: px2vw(500);
|
|
height: px2vw(500);
|
|
|
//宽度
|
|
//宽度
|
|
|
}
|
|
}
|
|
|
- .radarChat{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .radarChat {
|
|
|
// border: 1px solid #DDDDDD;
|
|
// border: 1px solid #DDDDDD;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
width: px2vw(600);
|
|
width: px2vw(600);
|
|
|
height: px2vw(600);
|
|
height: px2vw(600);
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.box2-table-box-left {
|
|
.box2-table-box-left {
|
|
|
width: px2vw(500);
|
|
width: px2vw(500);
|
|
|
}
|
|
}
|
|
@@ -606,9 +636,10 @@
|
|
|
margin-top: px2vw(40);
|
|
margin-top: px2vw(40);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .progress-item{
|
|
|
|
|
|
|
+ .progress-item {
|
|
|
margin-top: px2vw(40);
|
|
margin-top: px2vw(40);
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.progress-box {
|
|
.progress-box {
|
|
|
width: px2vw(700);
|
|
width: px2vw(700);
|
|
|
// margin-top: px2vw(40);
|
|
// margin-top: px2vw(40);
|
|
@@ -624,5 +655,8 @@
|
|
|
line-height: px2vw(26);
|
|
line-height: px2vw(26);
|
|
|
margin-left: px2vw(40);
|
|
margin-left: px2vw(40);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .input-jspf {
|
|
|
|
|
+ width: px2vw(110);
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|