Skip to content

C
car-database-web
Commit 8767f67f authored by zhang's avatar zhang
Browse files
Options

feat: (首页/检测内容) /检测要点:标准名称由超链接更新为字符形式,/测试用例库:页面整体更新

parent 9474d3d9
Hide whitespace changes
Inline Side-by-side
Showing with 539 additions and 0 deletions
src/assets/bg.png 0 → 100644
View file @ 8767f67f
This diff is collapsed.
src/assets/images/bg.png 0 → 100644
View file @ 8767f67f
This diff is collapsed.
src/assets/images/home/bg.png 0 → 100644
View file @ 8767f67f
This diff is collapsed.
src/assets/styles/home.scss 0 → 100644
View file @ 8767f67f
@font-face {
font-family: 'PMZDBTiTiMianFeiBan';
src: url('../font/PMZDBTiTiMianFeiBan-2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.home-header {
position: absolute;
top: 0;
width: 100%;
height: 40px;
z-index: 100;
&-title {
color: #ffffff;
text-align: center;
font-size: 26px;
font-family: Microsoft YaHei;
padding-top: 10px;
padding-right: 50px;
color: #ffffff;
font-weight: 700;
letter-spacing: 0.32px;
text-shadow: 0px 5px 4px 0px rgba(7, 26, 58, 0.25);
}
}
.home-page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding-top: 40px;
background: url('../images/home/bg.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
&-other {
width: 30%;
height: 100%;
}
&-center {
width: 40%;
height: 100%;
background: url('../images/home/huxian.png') no-repeat;
background-size: 100% 100%;
}
&-bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 120px;
background: url('../images/home/bottom.png') no-repeat;
background-size: 95% 100%;
display: flex;
justify-content: center;
.bottom-list {
width: 40%;
display: flex;
flex-wrap: wrap;
margin-right: 3%;
}
}
}
.card-box {
height: 30%;
&-header {
width: 100%;
height: 36px;
background: url('../images/home/header-card.png') no-repeat;
background-size: 100% 100%;
position: relative;
}
&-header2 {
width: 100%;
height: 36px;
background: url('../images/home/header-card2.png') no-repeat;
background-size: 100% 100%;
position: relative;
}
&-title {
position: absolute;
font-size: 18px;
font-family: Microsoft YaHei, Microsoft YaHei-700;
font-weight: 700;
color: #ffffff;
line-height: 20px;
letter-spacing: 0.24px;
left: 50px;
top: 0;
}
&-title2 {
position: absolute;
font-size: 18px;
font-family: Microsoft YaHei, Microsoft YaHei-700;
font-weight: 700;
color: #ffffff;
line-height: 20px;
letter-spacing: 0.24px;
right: 50px;
top: 0;
}
&-body {
padding: 5px 20px;
}
}
.show-card {
display: flex;
align-items: center;
justify-content: flex-start;
&-img {
width: 60px;
height: 60px;
}
&-body {
margin-left: 10px;
display: flex;
align-items: flex-start;
flex-flow: column;
&-title {
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #b4dbfc;
}
&-number {
font-size: 28px;
font-family: 'PMZDBTiTiMianFeiBan';
font-weight: 400;
text-align: LEFT;
color: #3ff4ff;
}
}
}
.bottom-card {
width: 14%;
margin: 1%;
padding: 10px;
&-img {
width: 50px;
}
&-title {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
text-align: center;
color: #ffffff;
line-height: 16px;
}
}
src/components/homeComponents/card.vue 0 → 100644
View file @ 8767f67f
<template>
<div class="card-box">
<div class="card-box-header">
<div class="card-box-title">
{{ title }}
</div>
</div>
<div class="card-box-body">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'card',
props: {
title: String
}
}
</script>
<style lang="scss" scoped></style>
src/components/homeComponents/cardRight.vue 0 → 100644
View file @ 8767f67f
<template>
<div class="card-box">
<div class="card-box-header2">
<div class="card-box-title2">
{{ title }}
</div>
</div>
<div class="card-box-body">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'card',
props: {
title: String
}
}
</script>
<style lang="scss" scoped></style>
src/components/homeComponents/pieChart.vue 0 → 100644
View file @ 8767f67f
<template>
<div
ref="chart"
style="width: 100%; height: 100%; display: flex; justify-content: center"
></div>
</template>
<script>
import 'echarts-liquidfill'
export default {
name: 'AverageTest',
props: {
value: {
type: Number,
default: 20
}
},
data() {
return {
chart: null
}
},
mounted() {
this.init()
},
methods: {
init() {
// 2.初始化
this.chart = this.$echarts.init(this.$refs.chart)
this.chart.setOption({}, true)
let self = this
let option = {
series: [
{
type: 'liquidFill',
//data: [0.6, 0.5, 0.4, 0.3],
data: [0.6, 0.5, 0.4, 0.3],
radius: '80%',
// 水球颜色
color: ['#49d088', '#38b470', '#2aaf66'],
center: ['15%', '55%'],
// outline 外边
outline: {
// show: false
borderDistance: 5,
itemStyle: {
borderWidth: 5,
borderColor: '#13FDCE'
}
},
label: {
normal: {
// textStyle: {
color: '#49d088',
insideColor: 'yellow',
fontSize: 24
// }
}
},
// 内图 背景色 边
backgroundStyle: {
color: 'rgba(4,24,74,0.8)'
// borderWidth: 5,
// borderColor: 'red',
}
},
{
type: 'liquidFill',
//data: [0.6, 0.5, 0.4, 0.3],
data: [0.3, 0.2, 0.1, 0.05],
radius: '80%',
// 水球颜色
color: ['#FE5555', '#F07581', '#FB5E61'],
center: ['50%', '55%'],
// outline 外边
outline: {
// show: false
borderDistance: 5,
itemStyle: {
borderWidth: 5,
borderColor: '#FE5555'
}
},
label: {
normal: {
textStyle: {
color: '#FE5555',
insideColor: 'yellow',
fontSize: 24
}
}
},
// 内图 背景色 边
backgroundStyle: {
color: 'rgba(4,24,74,0.8)'
// borderWidth: 5,
// borderColor: 'red',
}
},
{
type: 'liquidFill',
//data: [0.6, 0.5, 0.4, 0.3],
data: [0.1, 0.05, 0.25],
radius: '80%',
// 水球颜色
color: ['#FFBF11', '#F4B30E', '#EACE36'],
center: ['85%', '55%'],
// outline 外边
outline: {
// show: false
borderDistance: 5,
itemStyle: {
borderWidth: 5,
borderColor: '#FFBF11'
}
},
label: {
normal: {
textStyle: {
color: '#FFBF11',
insideColor: 'yellow',
fontSize: 24
}
}
},
// 内图 背景色 边
backgroundStyle: {
color: 'rgba(4,24,74,0.8)'
// borderWidth: 5,
// borderColor: 'red',
}
}
]
}
// 4.传入数据
this.chart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped></style>
src/components/homeComponents/planChart.vue 0 → 100644
View file @ 8767f67f
<template>
<div
ref="chart"
style="width: 100%; height: 100%; display: flex; justify-content: center"
></div>
</template>
<script>
import { Left } from '@icon-park/vue'
export default {
name: 'AverageTest',
props: {
value: {
type: Number,
default: 20
}
},
data() {
return {
chart: null
}
},
mounted() {
this.init()
},
methods: {
init() {
// 2.初始化
this.chart = this.$echarts.init(this.$refs.chart)
this.chart.setOption({}, true)
// 3.配置数据
const option = {
grid: {
top: '10%',
bottom: '20%', //也可设置left和right设置距离来控制图表的大小
left: '10%',
right: '10%'
},
xAxis: {
data: [
'9月1日',
'9月2日',
'9月3日',
'9月4日',
'9月5日',
'9月6日',
'9月7日',
'9月8日'
],
axisLine: {
show: false, //隐藏X轴轴线
lineStyle: {
color: '#01FCE3'
}
},
axisTick: {
show: false //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#b4dbfc',
fontSize:12 //X轴文字颜色,
}
}
},
yAxis: {
type: 'value',
nameTextStyle: {
color: '#b4dbfc'
},
splitLine: {
show: false
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: '#FFFFFF',
fontSize:12
}
},
axisLabel: {
show: true,
textStyle: {
color: '#b4dbfc'
}
}
},
series: [
{
name: '主营业务',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#00FFE3'
},
{
offset: 1,
color: '#4693EC'
}
])
}
},
data: [120, 380, 248, 135, 290, 280, 320, 125]
}
]
}
// 4.传入数据
this.chart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped></style>
src/components/homeComponents/table.vue 0 → 100644
View file @ 8767f67f
<template>
<div>
<table class="chart-table">
<tr>
<th>名称</th>
<th>更新时间</th>
<th>检验类型</th>
<th>内容详情</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td><el-tag type="warning" effect="plain">111</el-tag></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td><el-tag type="warning" effect="plain">222</el-tag></td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td><el-tag type="warning" effect="plain">111</el-tag></td>
<td>1</td>
</tr>
</table>
<div class="desc">检验标准：汽车整车信息安全技术要求</div>
</div>
</template>
<script>
export default {
name: 'card',
props: {
title: String
}
}
</script>
<style lang="scss" scoped>
.chart-table {
width: 100%;
border-collapse: collapse;
}
th {
background: #2c89f2;
color: #fff;
}
td {
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #b4dbfc;
background: rgba(44, 137, 242, 0.15);
}
th,
td {
padding: 2px;
text-align: center;
border-top: rgba(255, 255, 255, 0.3);
border-bottom: rgba(255, 255, 255, 0.3);
}
::v-deep {
.el-tag--plain {
background: transparent;
width: 60px;
}
}
.desc {
font-size: 12px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: center;
color: #ffffff;
line-height: 24px;
margin-top: 10px;
}
</style>
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