Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 1f875293 by hank
Options

周边功能 影片修改

parent 503ad61a
Showing with 683 additions and 55 deletions
public/template.html
......@@ -6,31 +6,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>测试模板</title>
<style>
html,body {
html,
body {
margin: 0;
padding: 0;
}
@keyframes border {
0% {
opacity: 1;
}
25% {
opacity: 0.75;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0.25;
}
}
.isEdit {
position: relative;
}
.isEdit::before{
.isEdit::before {
position: absolute;
top: 0;
left: 0;
......@@ -40,25 +48,31 @@
box-sizing: border-box;
z-index: 2;
border: 1px dashed yellowgreen;
border: 1px dashed white;
}
.isEdited::before {
border: 1px dashed yellowgreen;
animation: border 2s ease-in-out infinite;
}
.container {
padding: 0 20px;
background: linear-gradient(to right,#32295E, #5277AB);
background: linear-gradient(to right, #32295E, #5277AB);
height: 450px;
width: 800px;
color: white;
box-sizing: border-box;
}
.title {
height: 50px;
line-height: 50px;
line-height: 50px;
padding: 0 20px;
border-bottom: #eeeeee 2px solid;
}
.name {
padding: 0 20px;
border-bottom: #eeeeee 2px solid;
......@@ -68,26 +82,28 @@
justify-content: space-between;
align-items: center;
}
.bottom {
display: flex;
justify-content: space-between;
padding-top: 50px;
}
.bottom img {
height: 200px;
width: 250px;
}
.bottom-left {
}
.bottom-right {
.bottom-left {}
.bottom-right {}
}
.bottom-right .bottom-right-item {
height: 30px;
line-height: 30px;
margin-bottom: 10px;
}
.bottom-right .item-name {
display: inline-block;
height: 30px;
......@@ -95,6 +111,7 @@
padding: 0 5px;
width: 100px;
}
.bottom-right .item-des {
display: inline-block;
height: 30px;
......@@ -103,85 +120,138 @@
width: 200px;
/* overflow: hidden; */
}
.h2-right {
display: flex;
align-items: center;
align-items: center;
}
.right-icon {
margin-left: 10px;
height: 32px;
}
</style>
</head>
<body>
<div class="container" id="myApp">
<div class="title ">
<span class="">{{date}}</span>
<span class="">{{date}}</span>
</div>
<h2 class="name" class="h2">
<span class="isEdit" :class="isEdited(0)" @click="edit(0)">{{getValue(0)}}</span>
<h2 class="name" class="h2">
<span :class="isEdited(0) + ' ' + isEdit()" @click="edit(0)">{{getValue(0)}}</span>
<div class="h2-right">
<span class="isEdit" :class="isEdited(1)" @click="edit(1)">{{getValue(1)}}</span>
<img :src="img" class="isEdit right-icon" ></img>
<span :class="isEdited(1) + ' ' + isEdit()" @click="edit(1)">{{getValue(1)}}</span>
<img :src="img" class="isEdit right-icon"></img>
</div>
<!-- <img src="" alt=""> -->
</h2>
<div class="bottom">
<img class="isEdit bottom-left" @click="edit(2)" :class="isEdited(2)" :src="getValue(2)" alt="">
<div class="bottom-right">
<div class="bottom-right-item">
<span class="isEdit item-name" :class="isEdited(3)" @click="edit(3)">{{getValue(3)}}</span>
<span class="isEdit item-des" :class="isEdited(4)" @click="edit(4)">{{getValue(4)}}</span>
</div>
<div class="bottom-right-item">
<span class="isEdit item-name" :class="isEdited(5)" @click="edit(5)">{{getValue(5)}}</span>
<span class="isEdit item-des" :class="isEdited(6)" @click="edit(6)">{{getValue(6)}}</span>
</div>
<div class="bottom-right-item">
<span class="isEdit item-name" :class="isEdited(7)" @click="edit(7)">{{getValue(7)}}</span>
<span class="isEdit item-des" :class="isEdited(8)" @click="edit(8)">{{getValue(8)}}</span>
</div>
<div class="bottom-right-item">
<span class="isEdit item-name" :class="isEdited(9)" @click="edit(9)">{{getValue(9)}}</span>
<span class="isEdit item-des" :class="isEdited(10)" @click="edit(10)">{{getValue(10)}}</span>
</div>
<img class=" bottom-left" @click="edit(2)" :class="isEdited(2) + ' ' + isEdit()" :src="getValue(2)" alt="">
<div class="bottom-right">
<div class="bottom-right-item">
<span class="item-name" :class="isEdited(3) + ' ' + isEdit()" @click="edit(3)">{{getValue(3)}}</span>
<span class="item-des" :class="isEdited(4) + ' ' + isEdit()" @click="edit(4)">{{getValue(4)}}</span>
</div>
<div class="bottom-right-item">
<span class="item-name" :class="isEdited(5) + ' ' + isEdit()" @click="edit(5)">{{getValue(5)}}</span>
<span class="item-des" :class="isEdited(6) + ' ' + isEdit()" @click="edit(6)">{{getValue(6)}}</span>
</div>
<div class="bottom-right-item">
<span class="item-name" :class="isEdited(7) + ' ' + isEdit()" @click="edit(7)">{{getValue(7)}}</span>
<span class="item-des" :class="isEdited(8) + ' ' + isEdit()" @click="edit(8)">{{getValue(8)}}</span>
</div>
<div class="bottom-right-item">
<span class="item-name" :class="isEdited(9) + ' ' + isEdit()" @click="edit(9)">{{getValue(9)}}</span>
<span class="item-des" :class="isEdited(10) + ' ' + isEdit()" @click="edit(10)">{{getValue(10)}}</span>
</div>
</div>
</div>
</div>
</body>
<script>
function getQuery(key) {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf('?') != -1) {
var str = url.substr(1);
var strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
}
}
if (key) {
return theRequest[key];
} else {
return theRequest;
}
}
// http://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html
// http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg
var myApp = new Vue({
el: "#myApp",
computed() {
},
methods: {
getDefaulted() {
this.list = this.list.map(function(item){
this.list = this.list.map(function (item) {
return item = Object.assign(item, item.default)
})
},
message(data) {
window.parent.postMessage(data, '*')
},
edit(index) {
this.currentIndex = index;
var item = this.list[index]
console.log(this.currentIndex)
window.parent.postMessage({
this.message({
type: 'edit',
item,index
item, index
}, '*')
},
getList() {
this.message({
type: 'getList',
list: this.list
}, '*')
},
getValue(index) {
return this.list[index]? this.list[index]['value'] : ''
return this.list[index] ? this.list[index]['value'] : ''
},
isEdited(index) {
return this.isEditMode && this.currentIndex === index ? 'isEdited': ''
return this.isEditMode && this.currentIndex === index ? 'isEdited' : ''
},
isEdit(index) {
return this.isEditMode ? 'isEdit' : ''
}
},
created() {
this.getDefaulted()
var vm = this
console.log(getQuery('isEdit'))
if (getQuery('isEdit')) {
this.isEditMode = true
} else {
this.isEditMode = false
}
if(getQuery('filmId')) {
$.get('http://39.105.231.218:8090/myequipment/get/film/info/' + getQuery('filmId'), function (result) {
console.log(result)
vm.list = JSON.parse(result.filmData)
vm.filmId = result.filmId
})
} else {
vm.getDefaulted()
$.get("http://visual-clouds.bdideal.com/html/1560852648596e73433f32fa641d0a41e26ffaf88f42c.txt", function (result) {
console.log(result)
vm.list = JSON.parse(result)
vm.getDefaulted()
})
}
},
data: {
date: new Date().toLocaleString(),
......@@ -296,13 +366,19 @@
if (e.source != window.parent) return;
console.log(e.data, '客户端发来的消息');
console.log(typeof e.data === "object" && e.data['type'] == 'setData')
if( typeof e.data === "object" && e.data['type'] == 'setData') {
if (typeof e.data === "object" && e.data['type'] == 'setData') {
console.log(myApp.list[e.data.index])
myApp.list[e.data.index].value = e.data['value']
}
if( typeof e.data === "object" && e.data['type'] == 'cancelEdit') {
if (typeof e.data === "object" && e.data['type'] == 'cancelEdit') {
myApp.currentIndex = ''
}
if (typeof e.data === "object" && e.data['type'] == 'setList') {
myApp.list = e.data.list
}
if (typeof e.data === "object" && e.data['type'] == 'getList') {
myApp.getList()
}
// window.parent.postMessage(color, '*');
}, false)
......
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
// import Home from '@/views/Home.vue'
import Login from '@/views/login/index.vue'
import User from '@/views/user/index.vue'
import About from '@/views/user/about.vue'
import Device from '@/views/device/index.vue'
import Groups from '@/views/groups/index.vue'
import DeviceDetail from '@/views/device/detail.vue'
import Tempaltes from '@/views/tempaltes/index.vue'
import TempalteEdit from '@/views/tempaltes/edit.vue'
......@@ -18,10 +22,10 @@ const router = new Router({
{ path: '/tempaltes', name: 'Tempaltes', component: Tempaltes, meta: { keepAlive: true } },
{ path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: true } },
{ path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } },
{ path: '/devices', name: 'Home', component: Home, meta: { keepAlive: true } },
{ path: '/devices', name: 'Groups', component: Groups, meta: { keepAlive: true } },
{ path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },
{ path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: true } },
{ path: '/user', name: 'Home', component: Home, meta: { keepAlive: true } },
{ path: '/user', name: 'Home', component: User, meta: { keepAlive: true } },
]
},
{
......@@ -30,7 +34,16 @@ const router = new Router({
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
// component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
component: About
},
{
path: '/login',
name: 'Login',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Login
}
]
})
......
src/views/device/detail.vue
......@@ -45,7 +45,7 @@
<div class="title-tip">
当前使用模版
</div>
<div class="add">
<div class="add" @click="addTemplate">
<van-icon name="plus" />
</div>
<swiper :options="swiperOption"
......@@ -168,6 +168,11 @@ export default {
this.list = res.data.list
})
},
addTemplate() {
this.$router.push({
path: '/tempaltes'
})
},
deleteFilm(item) {
deleteFilm(item.filmId).then(res => {
console.log(res.data)
......
src/views/groups/des.vue 0 → 100644
<template>
<div class="common-tips">
<div>欢迎进入我的「设备组」，您可以：</div>
<div>
1.创建一个设备组，将多个设备选中添加到组内
</div>
<div>
2.您可以为设备组选定统一模版，编辑完毕后，内容将展示在组内全部设备上;
</div>
<div>
3.您可以解散设备组，组内设备不会被解绑，除非您选择全部解绑项。
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.common-tips {
color:rgba(51,51,51,0.8);
text-align: left;
font-size: 19px;
line-height: 34px;
position: fixed;
left: 54px;
bottom: 100px;
z-index: -1;
}
</style>
src/views/groups/index.vue 0 → 100644
<template>
<div class="device-container">
<NavBar title="设备组"></NavBar>
<div class="device-list">
<div class="device-item">
<div class="device-item-create">
<van-icon style="font-size: 52px;" name="plus"/>
</div>
<div class="device-title">添加设备组</div>
</div>
<div class="device-item">
<div class="device-item-top">
<div
class="device-item-img"
style="background: url(../../../img/ps/img.png) no-repeat center"
></div>
<div class="device-status">
<div class="device-icon" style="background-image: url(../../../img/ps/box.png) "></div>
<div class="status" @click="delGroup">解散设备组</div>
</div>
</div>
<div class="device-title">设备组A</div>
</div>
</div>
<Des></Des>
</div>
</template>
<script>
import NavBar from "@/views/layout/navbar";
import Des from "./des.vue";
export default {
components: {
NavBar,
Des
},
methods: {
goDetail() {
this.$router.push({
path: "/device/detail",
query: {
clientId: "maxrocky",
clientSecret: "maxrocky"
}
});
},
delGroup() {
this.$dialog
.confirm({
title: "解散设备组",
message: "您确认解散设备组A吗，解散后无法恢复"
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
}
}
};
</script>
<style lang="scss" scoped>
.device-list {
padding: 0 43px;
display: flex;
flex-wrap: wrap;
.device-item {
width: 296.5px;
min-height: 199.5px;
padding-top: 39px;
margin: 0 24px;
.device-item-create {
font-size: 52px;
height: 251.5px;
text-align: center;
display: flex;
justify-content: center;
// line-height: 251.5px;
align-items: center;
box-sizing: border-box;
color: #848484;
border: 1px solid #848484;
}
.device-item-top {
height: 251.5px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4.5px 25px 0px rgba(0, 0, 0, 0.14);
.device-item-img {
width: 100%;
height: 167px;
}
}
.device-status {
width: 296.5px;
height: 84.5px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
.device-icon {
width: 68px;
height: 44px;
margin-right: 18px;
background-size: 100%;
}
.status {
color: #28af48;
font-size: 18px;
}
.line {
color: #28af48;
}
.unline {
color: #28af48;
}
}
.device-title {
padding-top: 25px;
font-size: 24px;
color: #333333;
}
}
}
</style>
src/views/layout/index.vue
......@@ -5,9 +5,9 @@
</div>
<van-tabbar route >
<van-tabbar-item replace to="/tempaltes" active icon="home-o">模板库</van-tabbar-item>
<van-tabbar-item replace to="/devices" icon="search">设备组</van-tabbar-item>
<van-tabbar-item replace to="/device" icon="friends-o">我的设备</van-tabbar-item>
<van-tabbar-item replace to="/user" icon="setting-o">个人中心</van-tabbar-item>
<van-tabbar-item replace to="/devices" icon="cluster-o">设备组</van-tabbar-item>
<van-tabbar-item replace to="/device" icon="setting-o">我的设备</van-tabbar-item>
<van-tabbar-item replace to="/user" icon="friends-o">个人中心</van-tabbar-item>
</van-tabbar>
</div>
</template>
......
src/views/login/index.vue
<template>
<div class="login-container">
<div class="title">可视化平台</div>
<div class="name">Vmatrix</div>
<div class="login-content">
<van-cell-group>
<van-field v-model="loginForm.phone" left-icon="phone-o" placeholder="请输入手机号"/>
<van-field v-model="loginForm.code" left-icon="smile-comment-o" placeholder="请输入验证码">
<span slot="button" class="code" @click="sendCode">
<span v-if="time === 0">
获取验证码
</span>
<span v-else>
{{time}}s
</span>
</span>
</van-field>
</van-cell-group>
<div class="agree">
<label for>
<input type="checkbox" name id>
我已阅读并同意《可视化平台用户协议》中相关条款
</label>
</div>
<van-button
class="login-btn"
size="large"
:loading="isload"
loading-size="30px"
type="info"
text="提交"
@click="login"
loading-text="登录中"
></van-button>
</div>
</div>
</template>
<script>
import { setTimeout, clearTimeout } from "timers";
export default {
data() {
return {
loginForm: {
phone: "",
code: ""
},
isload: false,
time: 0
};
},
methods: {
login() {
this.isload = true;
var timer = setTimeout(() => {
this.isload = false;
window.localStorage.setItem('login', JSON.stringify(this.loginForm))
clearTimeout(timer);
this.$router.replace({
path:'/'
})
}, 1000);
},
sendCode() {
if (this.loginForm.phone.length == 11) {
var _this = this;
this.time = 60;
let Time = function () {
window.timer = setTimeout(() => {
_this.time--;
if (_this.time > 0) {
Time();
} else {
_this.time = 0;
window.clearTimeout(window.timer);
}
}, 1000);
}
Time()
this.$toast.success('发送成功')
} else {
this.$toast.fail('请输入正确的手机号')
}
}
}
};
</script>
<style lang="scss" scoped>
.login-container {
background: white url("../../../public/img/ps/bg.png") no-repeat bottom;
background-size: 100% auto;
height: 100vh;
.title {
font-size: 31px;
font-weight: bold;
border-bottom: 1px solid rgba(132, 132, 132, 0.4);
line-height: 70px;
height: 70px;
}
.name {
margin-top: 150px;
font-size: 47px;
font-weight: bold;
background: linear-gradient(
0deg,
rgba(129, 115, 247, 1) 0%,
rgba(94, 161, 251, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.login-content {
width: 550px;
margin: 0 auto;
padding-top: 125px;
font-size: 30px;
// background: #000;
.van-cell {
line-height: 60px;
font-size: 30px;
.van-field__left-icon {
font-size: 30px;
}
}
.code {
font-size:30px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(106,146,249,1);
}
.agree {
font-size: 21px;
padding-top: 47px;
color: #333333;
}
.login-btn {
width: 550px;
height: 77.5px;
background: linear-gradient(
96deg,
rgba(129, 115, 247, 1) 0%,
rgba(93, 163, 251, 1) 100%
);
border-radius: 6px;
margin-top: 78px;
font-size: 30px;
}
}
}
</style>
<style>
.login-container .van-field__left-icon .van-icon {
font-size: 30px;
min-width: 1.5em;
}
</style>
src/views/tempaltes/edit.vue
......@@ -21,6 +21,7 @@
</div>
<iframe
class="iframe"
v-if="loaded"
:style="{
height: templateData.height + 'px',
width: templateData.width + 'px'
......@@ -102,6 +103,7 @@ export default {
editIndex: "",
isEdited: false,
mode: "",
loaded: false,
show: false,
deviceList: [
{
......@@ -128,6 +130,7 @@ export default {
}
if (typeof e.data === "object" && e.data["type"] == "getList") {
vm.templateData.listData = e.data.list;
console.log('12121321321')
}
// var color = e.data;
// document.getElementById("color").style.backgroundColor = color;
......@@ -153,7 +156,6 @@ export default {
};
},
methods: {
message(data) {
window.frames[0].postMessage(data, "http://visual-clouds.bdideal.com");
},
......@@ -180,6 +182,7 @@ export default {
axios.get('http://visual-clouds.bdideal.com/html/156076616690429b1f3072101465b906a536cf608f824.txt').then(res => {
console.log(res.data);
});
this.loaded = true
});
},
getFilmDetail() {
......@@ -190,10 +193,15 @@ export default {
this.templateData.resourceUrl = res.data.resourceUrl;
this.templateData.frameUrl = res.data.frameUrl;
this.templateData.listData = JSON.parse(res.data.filmData);
this.loaded = true
});
},
publish() {
console.log(this.templateData.listData)
if(!this.templateData.listData.length) {
alert("数据为空")
return
}
if (this.mode === "film") {
updateFilmInfo(
this.$route.query.filmId,
......@@ -206,7 +214,6 @@ export default {
});
}
if (this.mode === "template") {
this.message
createFilm({
clientId: "maxrocky",
clientSecret: "maxrocky",
......@@ -241,7 +248,7 @@ export default {
})
setTimeout(() => {
this.publish()
}, 500)
}, 1000)
},
toggle(index) {
......
src/views/tempaltes/index.vue
......@@ -14,7 +14,22 @@
</div>
</div>
<div class="sort-container">
<div class="sort-item">
<span>分辨率</span>
<van-icon name="arrow-down"></van-icon>
</div>
<div class="sort-item">
<span class="active">横版</span>
<van-icon name="arrow-down"></van-icon>
</div>
<div class="sort-item">
<span>应用场景</span>
<van-icon name="arrow-down"></van-icon>
</div>
<div class="sort-item active">
<!-- <span>搜索</span> -->
<van-icon name="search"></van-icon>
</div>
</div>
</div>
<div class="template-list">
......@@ -136,6 +151,8 @@ export default {
padding-left: 50px;
.static-top {
padding-top: 40px;
display: flex;
justify-content: space-between;
}
.tab-btn {
display: flex;
......@@ -154,6 +171,22 @@ export default {
}
}
.sort-container {
display: flex;
.sort-item {
display: flex;
align-items: center;
padding-right: 60px;
color:rgba(51,51,51,.8);
font-size: 23px;
span {
padding-right: 10px;
}
.active {
color:rgba(51,51,51,1);
}
}
}
.template-list {
padding-top: 100px;
.template-item {
......
src/views/user/about.vue 0 → 100644
<template>
<div class="about">
<NavBar title="关于我们" left-arrow></NavBar>
<div class="content">
<img src="/img/ps/aboutbg.png" alt="">
</div>
</div>
</template>
<script>
import NavBar from '@/views/layout/navbar'
export default {
name: 'About',
components:{
NavBar
},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.about {
.content {
padding-top: 65px;
padding-bottom: 35px;
text-align: center;
img {
width: 50%;
}
}
}
</style>
src/views/user/index.vue 0 → 100644
<template>
<div class="user-container">
<NavBar title="个人中心" >
</NavBar>
<div class="user-content">
<img src="../../../public/img/ps/avatar.png" alt="">
<div class="right-item">
<div class="top">13811044826</div>
<div class="bottom a-btn" @click="logout">
[退出登录]
</div>
</div>
<div class="right-item">
<div class="top">我的设备：5个</div>
<div class="bottom a-btn ">
[批量解绑]
</div>
</div>
</div>
<div class="bottom-btn">
<div class="btn-item">
<div class="icon" style="background-image: url(/img/ps/uplv.png)">
</div>
<div class="des">固件升级</div>
</div>
<div class="btn-item">
<div class="icon" style="background-image: url(/img/ps/about.png)">
</div>
<div class="des">帮助反馈</div>
</div>
<div class="btn-item" @click="goAbout">
<div class="icon" style="background-image: url(/img/ps/help.png)">
</div>
<div class="des">关于我们</div>
</div>
</div>
</div>
</template>
<script>
import NavBar from '@/views/layout/navbar'
export default {
name: 'User',
components:{
NavBar
},
methods: {
goAbout() {
this.$router.push({
path: '/about'
})
},
logout() {
this.$dialog.confirm({
title: '你确定退出吗',
message: ''
}).then(() => {
// on confirm
window.localStorage.clear()
this.$router.push({
path: 'login'
})
}).catch(() => {
// on cancel
});
}
}
}
</script>
<style lang="scss" scoped>
.user-container {
height: calc(100vh - 50px);
background: white url("../../../public/img/ps/bg.png") no-repeat bottom;
background-size: 100% auto;
.user-content {
height: 242.5px;
box-sizing: border-box;
padding-left: 73.5px;
font-size: 25px;
padding-top: 54px;
padding-bottom: 54px;
border-bottom: 1px solid rgba(132,132,132,.4);
.a-btn {
color: #7286F9;
}
display: flex;
align-items: center;
img {
width: 133.5px;
}
.right-item {
padding-left: 79px;
padding-right: 79px;
position: relative;
.top {
padding-bottom: 30px;
}
&::after{
content: "";
width:1.5px;
height:39px;
background:rgba(132,132,132,1);
position: absolute;
top: 28px;
left: 0;
}
&:first-child::after {
display: none;
}
}
}
.bottom-btn {
padding: 320px 230px 0 230px;
display: flex;
box-sizing: border-box;
justify-content: space-between;
.icon {
width: 106.5px;
height: 106.5px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.des {
padding-top: 5.5px;
font-size: 24px;
color: #333333;
}
}
}
</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 sign in to comment