prod
lily.zhang 3 years ago
parent 9bb5b533c3
commit 57b195bea4

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:01:05
* @LastEditTime: 2021-11-02 13:05:06
* @LastEditTime: 2021-11-03 12:01:12
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-labelDiv/index.vue
@ -53,6 +53,7 @@ export default {
.v-label-container {
position: relative;
display: flex;
width: 100%;
height: 48px;
padding-left: 16px;
padding-right: 16px;

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-08 09:26:29
* @LastEditTime: 2021-10-25 13:15:04
* @LastEditTime: 2021-11-03 11:48:10
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/router/index.js
@ -31,6 +31,7 @@ import Login from "@/views/Login"
import EventDEC from "@/views/EventDEC"
import MarketingAnalysis from "@/views/MarketingAnalysis"
import ModelInsight from "@/views/ModelInsight"
import MarketingComparison from "@/views/MarketingComparison"
const router = [
{
path: '/login',
@ -127,6 +128,12 @@ const router = [
desc: "车型洞察",
component: ModelInsight
},
{
path: '/marketingComparison',
name: "marketingComparison",
desc: "营销对比",
component: MarketingComparison
},
]
},

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-13 11:54:38
* @LastEditTime: 2021-10-13 16:11:44
* @LastEditTime: 2021-11-03 11:32:04
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventDetails/hotOther/index.vue
@ -10,7 +10,7 @@
<div class="ho-outter">
<v-label-div title="热点事件传播导向" />
<div class="ho-bd">
<dv-scroll-board :config="config" :style="{ width: '100%', height: '432px' }" />
<dv-scroll-board :config="config" :style="{ width: '100%', height: '27rem' }" />
</div>
<div class="ho-footer">
<span class="ho-f-s1"> <span style="color: #2c66b5;">26785</span> </span>
@ -26,10 +26,11 @@ export default {
return {
currentPage: 1,
config: {
headerBGC: "#0F2A4D",
oddRowBGC: "rgba(69, 149, 244, 0);",
evenRowBGC: "#0F2A4D;",
columnWidth: [320],
headerBGC: "#0c203b",
oddRowBGC: "#173b6d",
evenRowBGC: "rgba(69, 149, 244, 0)",
rowNum: 10,
columnWidth: [224,'', 160],
header: ["事件列表", "影响力", "时间", "关联车型"],
data: [
[

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-25 11:03:30
* @LastEditTime: 2021-10-26 10:45:27
* @LastEditTime: 2021-11-03 11:48:52
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue
@ -55,7 +55,7 @@ export default {
});
},
goPath() {
this.$router.push({path: "/marketingComparison"})
},
},
};

@ -0,0 +1,50 @@
<!--
* @Author: your name
* @Date: 2021-11-03 11:45:09
* @LastEditTime: 2021-11-03 15:11:22
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/MarketingComparison/index.vue
-->
<template>
<div class="d-container">
<div class="mc-outter">
<mcChooseModel></mcChooseModel>
<div class="mc-d1">
<mcOSVC></mcOSVC>
<mcIVC></mcIVC>
</div>
<mcTOPMedia></mcTOPMedia>
<mcChannelDistribution></mcChannelDistribution>
</div>
</div>
</template>
<script>
import mcChooseModel from "./mcChooseModel"
import mcOSVC from "./mcOSVC"
import mcIVC from "./mcIVC"
import mcTOPMedia from "./mcTOPMedia"
import mcChannelDistribution from "./mcChannelDistribution"
export default {
name: "MarketingComparison",
components: {
mcChooseModel, //
mcOSVC, //
mcIVC, //
mcTOPMedia, // TOP
mcChannelDistribution //
}
}
</script>
<style lang="less" scoped>
.mc-outter {
padding: 0px 16px 16px 16px;
}
.mc-d1 {
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
</style>

@ -0,0 +1,41 @@
<!--
* @Author: your name
* @Date: 2021-10-15 15:08:13
* @LastEditTime: 2021-11-03 15:11:02
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
-->
<template>
<div class="cd-outter">
<v-label-div title="渠道分布">
</v-label-div>
<div class="cd-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
export default {
name: "mcChannelDistribution",
data() {
return {
opt: createOpt()
}
}
};
</script>
<style lang="less" scoped>
.cd-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
.cd-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,188 @@
/*
* @Author: your name
* @Date: 2021-10-15 15:15:27
* @LastEditTime: 2021-11-03 15:46:49
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
*/
import * as echarts from "echarts";
let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#3373CC'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#63AECC'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#54BF93'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC9D12'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC7733'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC5B41'
},
{
offset: 1,
color: '#071a32'
}
], false)]
export default function createOpt() {
return {
grid: {
top: "56px",
left: "16px",
right: "28px",
bottom: "16px",
containLabel: true,
},
color: colors,
legend: {
data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
textStyle: { //图例文字的样式
color: '#fff'
},
y: 12,
x: 16
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
},
xAxis: [
{
type: 'category',
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
}
],
yAxis: [
{
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#FFF",
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
}
],
series: [
{
name: '奥迪',
type: 'bar',
barGap: '9%',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 400]
},
{
name: '宝马',
type: 'bar',
barWidth: 16,
barGap: '9%',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 300]
},
{
name: '奔驰',
type: 'bar',
barWidth: 16,
barGap: '9%',
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 200]
},
{
name: '吉利',
type: 'bar',
barWidth: 16,
barGap: '9%',
emphasis: {
focus: 'series'
},
data: [98, 77, 101, 99, 40, 44]
},
{
name: '大众',
type: 'bar',
barWidth: 16,
barGap: '9%',
emphasis: {
focus: 'series'
},
data: [198, 177, 101, 199, 140, 145]
},
{
name: '别克',
type: 'bar',
barWidth: 16,
barGap: '9%',
emphasis: {
focus: 'series'
},
data: [298, 277, 201, 299, 240, 250]
}
]
}
}

@ -0,0 +1,217 @@
<!--
* @Author: your name
* @Date: 2021-11-03 11:54:08
* @LastEditTime: 2021-11-03 14:40:05
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
-->
<template>
<div class="mccm-outter">
<v-label-div title="切换车型">
<v-btn @click="goback"></v-btn>
</v-label-div>
<div class="mccm-inner">
<div class="mccm-item" style="margin-left: 1rem">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn">切换车型</div>
</div>
<img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
<div class="mccm-item">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn">切换车型</div>
</div>
<img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
<div class="mccm-item">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn">切换车型</div>
</div>
<img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
<div class="mccm-item">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn">切换车型</div>
</div>
<img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
<div class="mccm-item">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn">切换车型</div>
</div>
<img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
<div class="mccm-item">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn">切换车型</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "mcChooseModel",
data() {
return {
labelCol: { span: 9 },
wrapperCol: { span: 14 },
form: {
startTime: "",
endTime: "",
},
};
},
methods: {
goback() {
this.$router.go(-1)
}
}
};
</script>
<style lang="less" scoped>
.mccm-outter {
width: 1888px;
height: 276px;
border: 2px solid #0f2a4d;
.mccm-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.mccm-item {
width: 230px;
height: 200px;
background: linear-gradient(180deg, #003a62 0%, #001c43 100%);
border: 2px solid #0e5193;
margin-top: 13px;
border-radius: 2px;
position: relative;
.m-t-btn {
position: absolute;
top: 0px;
right: 0px;
width: 95px;
height: 28px;
background-image: url("../../../assets/images/BrandInsight/img_xbut.png");
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
text-align: center;
color: #63AECC;
line-height: 28px;
}
.mc-t {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 21px;
.m-t-d1 {
width: 78px;
height: 78px;
background-image: url("../../../assets/images/BrandInsight/img_lq.png");
background-repeat: no-repeat;
background-size: 100% 100%;
line-height: 78px;
text-align: center;
font-size: 14px;
color: #0090ff;
margin-left: 17px;
}
.m-t-s1 {
display: block;
font-size: 20px;
color: #fff;
margin-left: 6px;
}
}
}
.mccm-vs {
width: 94px;
height: 94px;
margin-top: 22px;
}
}
}
/deep/ .ant-form-item {
margin-bottom: 10px;
}
/deep/ .ant-calendar-picker {
min-width: auto !important;
}
</style>

@ -0,0 +1,43 @@
<!--
* @Author: your name
* @Date: 2021-11-03 14:53:47
* @LastEditTime: 2021-11-03 14:58:35
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/MarketingComparison/mcIVC/index.vue
-->
<template>
<div class="mic-outter">
<v-label-div title="互动量对比">
</v-label-div>
<div class="mic-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
export default {
name: "mcIVC",
data() {
return {
opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500], '#4fb58c')
}
}
}
</script>
<style lang="less" scoped>
.mic-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.mic-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,41 @@
<!--
* @Author: your name
* @Date: 2021-11-03 14:45:05
* @LastEditTime: 2021-11-03 14:58:11
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/MarketingComparison/mcOSVC/index.vue
-->
<template>
<div class="mos-outter">
<v-label-div title="整体声量对比">
</v-label-div>
<div class="mos-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
export default {
name: "mcOSVC",
data() {
return {
opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500])
}
}
}
</script>
<style lang="less" scoped>
.mos-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
}
.mos-inner {
width: 100%;
height: calc(100% - 48px);
}
</style>

@ -0,0 +1,242 @@
<!--
* @Author: your name
* @Date: 2021-10-15 15:58:57
* @LastEditTime: 2021-11-03 15:04:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
-->
<template>
<div class="bcm-outter">
<v-label-div title="品牌传播TOP媒体">
</v-label-div>
<div class="bcm-inner">
<div class="bcm-item" v-for="(item,index) in list" :key="index">
<span class="ss1" :style="{color: colors[index]}">{{item.name}}</span>
<v-ranking-bcm v-for="(it,n) in item.medias" :key="n" :label="it.label" :num="it.num" :val="it.val"></v-ranking-bcm>
</div>
</div>
</div>
</template>
<script>
import vRankingBcm from "./v-ranking-bcm"
export default {
name: "mcTOPMedia",
components: {
vRankingBcm
},
data() {
return {
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
{
name: '奥迪A4',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '宝马525',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '奔驰S600',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '吉利帝豪',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '大众途观',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '别克君威',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
}
]
}
}
};
</script>
<style lang="less" scoped>
.bcm-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bcm-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.bcm-item {
width: 282px;
margin-left: 27px;
.ss1 {
display: block;
font-size: 18px;
color: #fff;
font-weight: 500;
padding-top: 14px;
}
}
}
}
</style>

@ -0,0 +1,232 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-10-15 16:51:59
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-ranking/index.vue
-->
<template>
<div class="v-r-container">
<div class="v-r-line" v-if="lineShow"></div>
<div class="v-r-inner">
<div :class="ls">
<span class="s1">{{ num|numStr }}</span>
</div>
<div :class="rs">
<span class="v-r-label">{{label}}</span>
<div class="v-r-res">
<span class="s1">传播量</span>
<span class="s2">{{val}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "v-ranking-bcm",
props: {
num: {
type: [String, Number],
default: 1,
},
val: {
type: [String, Number],
default: 0
},
label: {
type: String,
default: ""
},
lineShow: {
type: Boolean,
default: true
},
},
watch: {
num: {
handler(val) {
if(val == 1) {
this.ls = "v-r-left-1"
this.rs = "v-r-right-1"
} else if(val == 2) {
this.ls = "v-r-left-2"
this.rs = "v-r-right-2"
} else if(val == 3) {
this.ls = "v-r-left-3"
this.rs = "v-r-right-3"
} else {
this.ls = "v-r-left"
this.rs = "v-r-right"
}
},
immediate: true
}
},
data() {
return {
ls: "v-r-left",
rs: "v-r-right"
}
},
filters: {
numStr(val) {
let str = ""
if(0<val && val<10) {
str = '0' + val
} else {
str = val + ''
}
return str
}
}
};
</script>
<style lang="less" scoped>
.v-r-container {
width: 281px;
height: auto;
.v-r-line {
width: 100%;
height: 1px;
background:#0a1d3b;
margin-top: 14px;
}
.v-r-inner {
position: relative;
width: 100%;
height: 40px;
margin-top: 14px;
color: #fff;
background: #0a1d3b;
border-radius: 2px;
}
.v-r-label {
display: block;
font-size: 14px;
color: #FFFFFF;
margin-left: 30px;
font-weight: bold;
}
.v-r-res {
margin-right: 16px;
display: flex;
justify-content: flex-start;
span {
display: block;
text-align: right;
font-size: 12px;
}
.s1 {
color: #9ba4af;
}
.s2 {
color: #fff;
font-family: Bebas;
margin-left: 10px;
}
}
.v-r-left {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 40px;
font-family: Bebas;
}
}
.v-r-right {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid transparent;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-1 {
width: 40px;
height: 40px;
text-align: center;
border: 2px solid #cc9d12;
border-radius: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 36px;
text-shadow: 0px 0px 8px #cc9d12;
font-family: Bebas;
}
}
.v-r-right-1 {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid #CC9D12;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-2 {
width: 40px;
height: 40px;
text-align: center;
border: 2px solid #3373CC;
border-radius: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 36px;
text-shadow: 0px 0px 8px #3373CC;
font-family: Bebas;
}
}
.v-r-right-2 {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid #3373CC;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-3 {
width: 40px;
height: 40px;
text-align: center;
border: 2px solid #54BF93;
border-radius: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 36px;
text-shadow: 0px 0px 8px #54BF93;
font-family: Bebas;
}
}
.v-r-right-3 {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid #54BF93;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>
Loading…
Cancel
Save