管理系统首页---可视化
目录
[TOC]
封装card组件
留出具名插槽
使用
<template slot="footer">
<div>日销售额:6589</div>
</template>
<template>
<div>
<div class="card-header">
<span>{{ title }}</span>
<svg
t="1652257863738"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1903"
width="16"
height="16"
>
<path
d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m3.008-92.992a416 416 0 1 0 0-832 416 416 0 0 0 0 832zM448 448h128v384H448V448z m0-256h128v128H448V192z"
fill="#262626"
p-id="1904"
></path>
</svg>
</div>
<div class="card-content">{{ count }}</div>
<div class="card-charts">
<slot name="charts"></slot>
</div>
<div class="card-footer">
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default {
name: "Card",
props: ["title", "count"],
};
</script>
<style>
.card-header {
display: flex;
justify-content: space-between;
color: #d9d9d9;
}
.card-content {
font-size: 30px;
padding: 10px 0;
}
.card-charts {
height: 50px;
}
.card-footer {
border-top: 1px solid #eee;
padding-top: 10px;
}
</style>
封装折线图
<template>
<!-- 容器 -->
<div class="echarts" ref="dom"></div>
</template>
<script>
//引入echarts
import * as echarts from "echarts";
export default {
name: "line",
mounted() {
console.log();
// 初始化echarts实例;
let lineChart = echarts.init(this.$refs.dom);
// 配置数据
lineChart.setOption({
xAxis: {
//隐藏x轴
show: false,
// 折线
type: "category",
},
yAxis: {
//隐藏y轴
show: false,
},
//系列
series: [
{
// 折线
type: "line",
data: [10, 7, 33, 4, 88, 9, 33, 4, 55],
//设置拐点的样式设置
itemStyle: {
opacity: 0,
},
// 线条的样式
lineStyle: {
color: "purple",
},
//填充颜色
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "purple", // 0% 处的颜色
},
{
offset: 1,
color: "#fff", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
],
// 布局调试
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
});
},
};
</script>
<style scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
封装柱状图
<template>
<!-- 容器 -->
<div class="echarts" ref="dom"></div>
</template>
<script>
//引入echarts
import * as echarts from "echarts";
export default {
name: "bar",
mounted() {
console.log();
// 初始化echarts实例;
let lineChart = echarts.init(this.$refs.dom);
// 配置数据
lineChart.setOption({
xAxis: {
//隐藏x轴
show: false,
},
yAxis: {
//隐藏y轴
show: false,
},
//系列
series: [
{
// 柱状图
type: "bar",
data: [11, 22, 33, 44],
color: "pink",
},
],
// 布局调试
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
tooltip: {},
});
},
};
</script>
<style scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
进度条
<template>
<!-- 容器 -->
<div class="echarts" ref="dom"></div>
</template>
<script>
//引入echarts
import * as echarts from "echarts";
export default {
name: "progressBar",
mounted() {
// 初始化echarts实例;
let lineChart = echarts.init(this.$refs.dom);
// 配置数据
lineChart.setOption({
xAxis: {
//隐藏x轴
show: false,
// 最大值最小值
min: 0,
max: 100,
},
yAxis: {
//隐藏y轴
show: false,
//均分
type: "category",
//柱状图宽度的设置
},
//系列
series: [
{
// 柱状图
type: "bar",
data: [78],
color: "pink",
//柱状图宽
barWidth: 10,
color: "yellow",
// 背景颜色
showBackground: true,
backgroundStyle: {
color: "#eee",
},
// 文本
label: {
show: true,
// 文本内容
formatter: "|",
//文本标签位置
position: "right",
},
},
],
// 布局调试
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
tooltip: {},
});
},
};
</script>
<style scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
顶部区域
<template>
<div>
<el-row :gutter="10">
<el-col :span="6">
<el-card>
<Card title="总销售额" count="￥ 126560">
<template slot="charts">
<span
>周同比 56.67%
<svg
t="1652258822317"
class="icon"
viewBox="0 0 1028 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2846"
width="16"
height="16"
>
<path
d="M546.816 1.024q99.328 0 186.88 37.888t152.576 102.912 102.912 152.576 37.888 186.88-37.888 186.88-102.912 152.576-152.576 102.4-186.88 37.376q-88.064 0-166.4-29.696t-141.824-81.92l116.736-248.832q21.504 34.816 39.936 64.512 15.36 25.6 30.72 48.64t21.504 31.232q11.264 14.336 20.992 26.624t27.136 14.336q21.504 3.072 30.72-7.68t20.48-28.16q3.072-4.096 11.776-21.504t20.992-43.008 27.648-56.832 30.72-64q35.84-75.776 79.872-168.96l108.544 58.368-44.032-316.416-278.528 171.008 121.856 41.984-129.024 265.216q-29.696-48.128-51.2-83.968-9.216-15.36-17.92-29.184t-14.848-24.064l-9.216-15.36q4.096 8.192 0.512 2.56t-11.776-15.872-18.432-20.48-19.456-10.24q-23.552 0-33.792 11.776t-16.384 27.136q-2.048 4.096-10.24 22.016t-21.504 44.544-28.672 59.392l-32.768 63.488q-15.36 32.768-29.696 62.464t-24.576 50.176q-43.008-59.392-66.048-130.048t-23.04-148.48q0-99.328 37.376-186.88t102.4-152.576 152.576-102.912 186.88-37.888z"
p-id="2847"
fill="#1296db"
></path></svg
></span>
<span
>日同比 19,96%
<svg
t="1652258977565"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3842"
width="16"
height="16"
>
<path
d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 68.3c3.6 1.6 7 3.7 9.9 6.6l198 198L451 349.9c12.5-12.5 32.8-12.5 45.2 0l180.3 180.3 26.9-26.9c11.9-11.9 32.3-6.5 36.6 9.8l38.4 143.1c4.4 16.3-10.5 31.2-26.8 26.8l-143.1-38.4c-16.3-4.4-21.7-24.7-9.8-36.6l32.6-32.6L473.6 417.8 326.5 564.9c-12.5 12.5-32.8 12.5-45.2 0L96 379.6l0 420.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z"
p-id="3843"
fill="#d81e06"
></path></svg
></span>
</template>
<template slot="footer">
<div>日销售额:6589</div>
</template>
</Card>
</el-card>
</el-col>
<!-- 第二个 -->
<el-col :span="6">
<el-card>
<Card title="访问量" count="￥ 88460">
<template slot="charts">
<lineChart></lineChart>
</template>
<template slot="footer">
<span>访问量:6907</span>
</template>
</Card>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<Card title="支付笔数" count="￥ 34520">
<template slot="charts">
<barChart></barChart>
</template>
<template slot="footer">
<span>转化率:65%</span>
</template>
</Card>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<Card title="运营活动效果" count="78%">
<template slot="charts">
<progressBar></progressBar>
</template>
<template slot="footer">
<span
>周同比 56.67%
<svg
t="1652258822317"
class="icon"
viewBox="0 0 1028 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2846"
width="16"
height="16"
>
<path
d="M546.816 1.024q99.328 0 186.88 37.888t152.576 102.912 102.912 152.576 37.888 186.88-37.888 186.88-102.912 152.576-152.576 102.4-186.88 37.376q-88.064 0-166.4-29.696t-141.824-81.92l116.736-248.832q21.504 34.816 39.936 64.512 15.36 25.6 30.72 48.64t21.504 31.232q11.264 14.336 20.992 26.624t27.136 14.336q21.504 3.072 30.72-7.68t20.48-28.16q3.072-4.096 11.776-21.504t20.992-43.008 27.648-56.832 30.72-64q35.84-75.776 79.872-168.96l108.544 58.368-44.032-316.416-278.528 171.008 121.856 41.984-129.024 265.216q-29.696-48.128-51.2-83.968-9.216-15.36-17.92-29.184t-14.848-24.064l-9.216-15.36q4.096 8.192 0.512 2.56t-11.776-15.872-18.432-20.48-19.456-10.24q-23.552 0-33.792 11.776t-16.384 27.136q-2.048 4.096-10.24 22.016t-21.504 44.544-28.672 59.392l-32.768 63.488q-15.36 32.768-29.696 62.464t-24.576 50.176q-43.008-59.392-66.048-130.048t-23.04-148.48q0-99.328 37.376-186.88t102.4-152.576 152.576-102.912 186.88-37.888z"
p-id="2847"
fill="#1296db"
></path></svg
></span>
<span
>日同比 19,96%
<svg
t="1652258977565"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3842"
width="16"
height="16"
>
<path
d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 68.3c3.6 1.6 7 3.7 9.9 6.6l198 198L451 349.9c12.5-12.5 32.8-12.5 45.2 0l180.3 180.3 26.9-26.9c11.9-11.9 32.3-6.5 36.6 9.8l38.4 143.1c4.4 16.3-10.5 31.2-26.8 26.8l-143.1-38.4c-16.3-4.4-21.7-24.7-9.8-36.6l32.6-32.6L473.6 417.8 326.5 564.9c-12.5 12.5-32.8 12.5-45.2 0L96 379.6l0 420.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z"
p-id="3843"
fill="#d81e06"
></path></svg
></span>
</template>
</Card>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import Card from "./card.vue";
import lineChart from "./Chart/line.vue";
import barChart from "./Chart/bar.vue";
import progressBar from "./Chart/progressBar.vue";
export default {
name: "card",
components: {
Card,
lineChart,
barChart,
progressBar,
},
};
</script>
<style>
</style>
内容主体区域
处理日期第三方库dayjs
npm install dayjs --save
import * as dayjs from "dayjs";
天
const day = dayjs().format("YYYY-MM-DD");
月
const start = dayjs().startOf("month").format("YYYY-MM-DD");
const end = dayjs().endOf("month").format("YYYY-MM-DD");
周
const start = dayjs().day(1).format("YYYY-MM-DD");
const end = dayjs().day(7).format("YYYY-MM-DD");
年
const start = dayjs().startOf("year").format("YYYY-MM-DD");
const end = dayjs().endOf("year").format("YYYY-MM-DD");
代码
<template>
<el-card class="box-card" style="margin: 10px 0">
<!-- 头部 -->
<div slot="header" class="clearfix">
<!-- 头部左侧内容 -->
<!-- v-model="activeName" @tab-click="handleClick" -->
<el-tabs class="tabs" v-model="activeName">
<el-tab-pane label="销售额" name="sale"></el-tab-pane>
<el-tab-pane label="访问量" name="visite"></el-tab-pane>
</el-tabs>
<!-- 头部右侧内容 -->
<div class="right">
<span @click="setDay">今日 </span>
<span @click="setWeek">本周</span>
<span @click="setNMonth">本月</span>
<span @click="setYear">本年</span>
<el-date-picker
v-model="date"
class="date"
type="datetimerange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="mini"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
</div>
<el-row :gutter="10">
<el-col :span="16">
<div class="echarts" ref="dom"></div>
</el-col>
<el-col :span="8" class="right">
<div>
<h3>门店{{ title }}排名</h3>
<ul>
<li>
<span class="rindex">0</span>
<span>肯德基</span>
<span class="rvalue">2387</span>
</li>
<li>
<span class="rindex">2</span>
<span>肯德基</span>
<span class="rvalue">2387</span>
</li>
<li>
<span class="rindex">3</span>
<span>肯德基</span>
<span class="rvalue">2387</span>
</li>
<li>
<span>4</span>
<span>肯德基</span>
<span class="rvalue">2387</span>
</li>
<li>
<span>5</span>
<span>肯德基</span>
<span class="rvalue">2387</span>
</li>
<li>
<span>6</span>
<span>肯德基</span>
<span class="rvalue">2387</span>
</li>
<li>
<span>7</span>
<span>肯德基</span>
<span class="rvalue">2387</span>
</li>
</ul>
</div>
</el-col>
</el-row>
</el-card>
</template>
<script>
import * as echarts from "echarts";
import * as dayjs from "dayjs";
export default {
name: "sale",
data() {
return {
activeName: "sale",
myecharts: null,
//收集日期数据
date: [],
};
},
mounted() {
// 初始化echarts实例;
this.myecharts = echarts.init(this.$refs.dom);
this.myecharts.setOption({
title: {
text: this.title + "趋势",
},
xAxis: {
type: "category",
data: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
},
yAxis: {
type: "value",
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130, 108, 120, 110, 80, 120],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
tooltip: {},
});
},
//计算属性 标题
computed: {
title() {
return this.activeName == "sale" ? "销售额" : "访问量";
},
},
// 监听属性
watch: {
title() {
// 重新修改图表的配置信息
//图表的配置信息可以在次修改，如果有新值就是新的，没有就是以前的
this.myecharts.setOption({
title: {
text: this.title + "趋势",
},
});
},
},
methods: {
// 本天
setDay() {
const day = dayjs().format("YYYY-MM-DD");
this.date = [day, day];
},
//本周
setWeek() {
const start = dayjs().day(1).format("YYYY-MM-DD");
const end = dayjs().day(7).format("YYYY-MM-DD");
this.date = [start, end];
},
//本月
setNMonth() {
const start = dayjs().startOf("month").format("YYYY-MM-DD");
const end = dayjs().endOf("month").format("YYYY-MM-DD");
this.date = [start, end];
},
// 本年
setYear() {
const start = dayjs().startOf("year").format("YYYY-MM-DD");
const end = dayjs().endOf("year").format("YYYY-MM-DD");
this.date = [start, end];
},
},
};
</script>
<style scoped>
.clearfix {
display: flex;
justify-content: space-between;
position: relative;
}
.tabs {
width: 100%;
}
.right {
position: absolute;
right: 0;
}
.right span {
margin: 0 10px;
}
.date {
width: 260px;
max-width: 0 20px;
}
.echarts {
width: 100%;
height: 300px;
}
ul {
list-style: none;
width: 100%;
height: 300px;
padding: 0;
}
ul li {
height: 8%;
margin: 10px 0;
}
.rindex {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000;
color: #fff;
text-align: center;
float: left;
line-height: 20px;
}
.rvalue {
float: right;
}
</style>
底部区域
可视化组件
<template>
<div>
<div class="header">
<span class="search">搜索用户数</span>
<svg
t="1652257863738"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1903"
width="18"
height="18"
>
<path
d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m3.008-92.992a416 416 0 1 0 0-832 416 416 0 0 0 0 832zM448 448h128v384H448V448z m0-256h128v128H448V192z"
fill="#262626"
p-id="1904"
></path>
</svg>
</div>
<div class="main">
<span class="main-title">12306</span>
<span class="main-countent">17.1</span>
<svg
t="1652258822317"
class="icon"
viewBox="0 0 1028 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2846"
width="16"
height="16"
>
<path
d="M546.816 1.024q99.328 0 186.88 37.888t152.576 102.912 102.912 152.576 37.888 186.88-37.888 186.88-102.912 152.576-152.576 102.4-186.88 37.376q-88.064 0-166.4-29.696t-141.824-81.92l116.736-248.832q21.504 34.816 39.936 64.512 15.36 25.6 30.72 48.64t21.504 31.232q11.264 14.336 20.992 26.624t27.136 14.336q21.504 3.072 30.72-7.68t20.48-28.16q3.072-4.096 11.776-21.504t20.992-43.008 27.648-56.832 30.72-64q35.84-75.776 79.872-168.96l108.544 58.368-44.032-316.416-278.528 171.008 121.856 41.984-129.024 265.216q-29.696-48.128-51.2-83.968-9.216-15.36-17.92-29.184t-14.848-24.064l-9.216-15.36q4.096 8.192 0.512 2.56t-11.776-15.872-18.432-20.48-19.456-10.24q-23.552 0-33.792 11.776t-16.384 27.136q-2.048 4.096-10.24 22.016t-21.504 44.544-28.672 59.392l-32.768 63.488q-15.36 32.768-29.696 62.464t-24.576 50.176q-43.008-59.392-66.048-130.048t-23.04-148.48q0-99.328 37.376-186.88t102.4-152.576 152.576-102.912 186.88-37.888z"
p-id="2847"
fill="#1296db"
></path>
</svg>
<svg
t="1652258977565"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3842"
width="16"
height="16"
>
<path
d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 68.3c3.6 1.6 7 3.7 9.9 6.6l198 198L451 349.9c12.5-12.5 32.8-12.5 45.2 0l180.3 180.3 26.9-26.9c11.9-11.9 32.3-6.5 36.6 9.8l38.4 143.1c4.4 16.3-10.5 31.2-26.8 26.8l-143.1-38.4c-16.3-4.4-21.7-24.7-9.8-36.6l32.6-32.6L473.6 417.8 326.5 564.9c-12.5 12.5-32.8 12.5-45.2 0L96 379.6l0 420.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z"
p-id="3843"
fill="#d81e06"
></path>
</svg>
</div>
<div class="footer">
<div class="echarts" ref="dom"></div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "lineCharts",
mounted() {
console.log();
// 初始化echarts实例;
let lineChart = echarts.init(this.$refs.dom);
// 配置数据
lineChart.setOption({
xAxis: {
//隐藏x轴
show: false,
// 折线
type: "category",
},
yAxis: {
//隐藏y轴
show: false,
},
//系列
series: [
{
// 折线
type: "line",
data: [10, 7, 33, 4, 88, 9, 33, 4, 55],
//设置拐点的样式设置
itemStyle: {
opacity: 0,
},
// 线条的样式
lineStyle: {
color: "purple",
},
//填充颜色
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "purple", // 0% 处的颜色
},
{
offset: 1,
color: "#fff", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
],
// 布局调试
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
});
},
};
</script>
<style scoped>
.header {
display: flex;
align-items: center;
}
.search {
margin-right: 20px;
}
.main {
margin-top: 10px 0;
}
.main-title {
margin-right: 30px;
}
.main-countent {
margin-right: 10px;
}
.echarts {
width: 100%;
height: 50px;
}
</style>
搜索组件
<template>
<div>
<el-card>
<div slot="header" class="header">
<div class="searchHeader">
<span>线上热门搜索</span>
<i class="el-icon-more"></i>
<el-dropdown>
<span>
<i class="el-icon-more"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div>
<el-row :gutter="10">
<el-col :span="12">
<lineCharts></lineCharts>
</el-col>
<el-col :span="12">
<lineCharts></lineCharts>
</el-col>
</el-row>
</div>
<!-- table -->
<el-table :data="tableData" style="width: 100%" border>
<el-table-column label="排名" width="80" type="index">
</el-table-column>
<el-table-column label="搜索关键字"> </el-table-column>
<el-table-column label="用户名" sortable> </el-table-column>
<el-table-column label="周长浮" sortable> </el-table-column>
</el-table>
<!-- 分页器 -->
<div class="block">
<el-pagination
layout="prev, pager, next"
:total="1000"
class="pagination"
>
</el-pagination>
</div>
</el-card>
</div>
</template>
<script>
import lineCharts from "./lineCharts.vue";
export default {
name: "search",
components: {
lineCharts,
},
data() {
return {
tableData: [],
};
},
};
</script>
<style scoped>
.searchHeader {
display: flex;
justify-content: space-between;
}
.header {
border-bottom: 1px solid #eee;
padding: 5px o;
}
.pagination {
float: right;
}
</style>
饼状图区域
<template>
<div>
<el-card>
<div slot="header" class="header">
<div class="category-header">
<span>销售额类别占比</span>
<el-radio-group v-model="value">
<el-radio-button label="全部渠道"></el-radio-button>
<el-radio-button label="线上"></el-radio-button>
<el-radio-button label="门店"></el-radio-button>
</el-radio-group>
</div>
</div>
<div>
<div class="charts" ref="charts"></div>
</div>
</el-card>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "category",
data() {
return {
value: "全部渠道",
};
},
mounted() {
let Chart = echarts.init(this.$refs.charts);
Chart.setOption({
title: {
text: "",
subtext: "",
left: "center",
top: "center",
},
tooltip: {
trigger: "item",
},
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
position: "outsize",
},
labelLine: {
show: true,
},
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
],
},
],
});
Chart.on("mouseover", (par) => {
//获取鼠标移上的数据
const { name, value } = par;
Chart.setOption({
title: {
text: name,
subtext: value,
},
});
});
},
};
</script>
<style scoped>
.category-header {
display: flex;
justify-content: space-around;
align-items: center;
}
.header {
border-bottom: 1px solid #eee;
}
.charts {
width: 100%;
height: 300px;
}
</style>
