Files
4.0/src/renderer/views/login/index.vue
2025-09-10 19:14:15 +08:00

1105 lines
32 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="login-container">
<video autoplay loop src="../../../../static/login_video.mp4" style="position:absolute;width: 100%;
height: 100%;
object-fit: cover;"></video>
<div class="absolute zIndex99" style="right: 0">
<el-button size="mini" :plain="true" class="el-icon-setting" @click="openServiceSet">
</el-button>
</div>
<div class="content">
<div class="titleBox">
<div class="titleItem">
<img src="../../assets/images/titleLeft.png" alt="" />
<div>
<!-- <div style="font-size: 4em;font-family: 'youshe';" class="title">
北斗定位+
</div>
<div style="font-size: 3.5em;" class="title">
便携式应急指挥电子沙盘系统
</div> -->
<div class="title">{{ $t("title.name") }}</div>
</div>
<img src="../../assets/images/titleRight.png" alt="" />
</div>
</div>
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
label-position="left">
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon :class-name="['login_icon']" icon-class="user" />
</span>
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名" />
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon :class-name="['password_icon']" icon-class="password">
</svg-icon>
</span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
autoComplete="on" placeholder="请输入密码"></el-input>
<span class="show-pwd" @click="showPwd">
<svg-icon :class-name="['eye_icon']" icon-class="eye" />
</span>
</el-form-item>
<!-- <div
v-throttle="5000"
class="signInBox"
:loading="loading"
@click="handleLogin"
>
{{ $t("login.signIn") }}
</div> -->
<el-form-item class="rememberForget">
<!-- justify-content: space-around;align-items: center; -->
<div style="display: flex;">
<el-checkbox :disabled="loading" v-model="checkboxVModel" @change="rememberpwd"
label="string">记住密码</el-checkbox>
<!-- <div style="cursor: pointer;">忘记密码</div> -->
</div>
</el-form-item>
<el-button v-throttle="5000" class="signInBox" :loading="loading" @click="handleLogin">
{{ $t("login.signIn") }}
</el-button>
<!-- <div class="tips">
<span style="margin-right:20px;">username: admin</span>
<span> password: admin</span>
</div>-->
</el-form>
</div>
<!--切换服务地址-->
<el-dialog title="服务设置" :modal="false" :visible.sync="serviceDialogs" width="680px" @close="cancel" :center="true"
:close-on-click-modal="false">
<el-tabs type="border-card">
<el-tab-pane label="接口服务">
<div class="contentBox">
<div class="checkBoxGroup">
<div class="ipBox">
<el-checkbox v-model="isLocal">单机</el-checkbox>
<div>
<span style="visibility: hidden"></span><span>IP</span>
<el-input v-model="localip" :disabled="true"></el-input>
</div>
<div>
<span>端口</span>
<!-- 65535 -->
<el-input v-model="localport" :disabled="isNet"></el-input>
</div>
</div>
<div>
<el-checkbox v-model="isNet">网络</el-checkbox>
<div class="ipBox">
<div>
<span>协议</span>
<el-input v-model="prototype" :disabled="isLocal"></el-input>
</div>
<div>
<span style="visibility: hidden"></span><span>IP</span>
<el-input v-model="ip" :disabled="isLocal"></el-input>
</div>
<div>
<span>端口</span>
<el-input v-model="port" :disabled="isLocal"></el-input>
</div>
</div>
</div>
</div>
</div>
<div class="btn">
<el-button size="mini" type="primary" @click="submitIP">确定</el-button>
<el-button size="mini" type="danger" @click="cancel">关闭</el-button>
</div>
</el-tab-pane>
<!-- 便携式才需要gps -->
<el-tab-pane label="gps串口">
<div class="contentBox">
<span>串口选择</span>
<el-select v-model="gpsVal">
<el-option v-for="item in gpsOptions" :key="item.value" :label="item.Product" :value="item.Name">
</el-option>
</el-select>
</div>
<div class="btn">
<el-button size="mini" type="primary" @click="submitGPS">确定</el-button>
<el-button size="mini" type="danger" @click="cancel">关闭</el-button>
</div>
</el-tab-pane>
</el-tabs>
<!-- :content="richTextDialog.content"-->
<!-- <richTextEditor></richTextEditor>-->
<!-- <div style="display: flex;justify-content: flex-end;padding: 6px 0;">
<el-button size="mini" type="primary" @click="save">确定</el-button>
<el-button size="mini" type="danger" @click="cancel">取消</el-button>
</div>-->
</el-dialog>
<div class="service" v-if="serviceDialog">
<div class="contentBox">
<div class="titleBox">
<span class="title">服务设置</span>
<span class="closeBox">
<span @click="cancel"></span>
</span>
<div class="hr"></div>
</div>
<div class="serviceContent">
<div class="tab">
<template v-for="item in serviceOptions">
<span :class="[
'tab-item',
selectedService == item.name ? 'activeService' : '',
]" @click="selectedService = item.name">{{ item.name }}</span>
</template>
</div>
<div class="tabPanel">
<template v-if="selectedService == '接口服务'">
<div class="item">
<span class="itemLabel">服务选择</span>
<el-select class="select" v-model="servVal">
<el-option size="mini" v-for="item in servOptions" :key="item.value" :label="item.name"
:value="item.name">
</el-option>
</el-select>
</div>
<div class="prototype" v-if="servVal == '网络'">
<span class="itemLabel">协议</span><el-input style="width: 200px" v-model="prototype"></el-input>
</div>
<div class="item ip">
<template v-if="servVal == '单机'">
<span class="itemLabel">IP</span>{{ localip }}
</template>
<template v-if="servVal == '网络'">
<span class="itemLabel">IP</span>
<el-input style="width: 200px" v-model="ip"></el-input>
</template>
</div>
<div class="item port">
<template v-if="servVal == '单机'">
<span class="itemLabel">端口</span>
<el-input style="width: 200px" v-model="localport"></el-input>
</template>
<template v-if="servVal == '网络'">
<span class="itemLabel">端口</span>
<el-input style="width: 200px" v-model="port"></el-input>
</template>
</div>
</template>
<template v-if="selectedService == '北斗串口'">
<div class="item">
<span class="itemLabel">串口选择</span>
<el-select class="select" v-model="gpsVal">
<el-option size="mini" v-for="item in gpsOptions" :key="item.value" :label="item.Product"
:value="item.Name">
</el-option>
</el-select>
</div>
</template>
</div>
</div>
<div class="btn">
<div class="hr"></div>
<el-button style="margin: 5px 0" size="mini" @click="submit">确定</el-button>
<el-button size="mini" @click="cancel">关闭</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import { ipcRenderer, remote } from "electron";
import { isvalidUsername } from "@/utils/validate";
import { getIP, setIP, setLocal, getLocal } from "../../utils";
import { validateURL } from "../../utils/validate";
import { checkAuth, service_progress } from "@/api/gisAPI";
import { login } from "@/api/air.js";
import { getGpsList, updateGps } from "../../api/gisAPI";
import websocket from "../../utils/websocket";
import webrtc from "../../components/webrtc.vue";
let timer = null;
let loading = null;
// import setAgreement from "./setAgreementInfo/setAgreement.vue";
export default {
name: "login",
// components: {setAgreement},
computed: {},
components: {
webrtc
},
data() {
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error("请输入正确的用户名"));
} else {
callback();
}
};
const validatePass = (rule, value, callback) => {
if (value.length < 5) {
callback(new Error("密码不能小于5位"));
} else {
callback();
}
};
return {
servOptions: [{ name: "单机" }, { name: "网络" }],
selectedService: "接口服务",
serviceOptions: [
{ name: "接口服务" },
// { name: "北斗串口" }
],
servVal: "单机",
gpsVal: "",
gpsOptions: [],
prototype: "http",
ip: "192.168.1.1",
port: "8890",
localip: "127.0.0.1",
localport: "8891",
// localport: "8891",
isLocal: false,
isNet: false,
serviceDialog: false,
serviceDialogs: false,
select_id: 1, //选中服务接入
disabled: true, //默认禁用状体
loginForm: {
username: "",
password: "",
},
loginRules: {
username: [
{ required: true, trigger: "blur", validator: validateUsername },
],
password: [
{ required: true, trigger: "blur", validator: validatePass },
],
},
loading: false,
pwdType: "password",
isRememberPassword: false,
checkboxVModel: false,
urls: ['http://121.37.237.116:28453/rtc/v1/whep/?app=live&stream=4SEDL9C001X8GE4SEDL9C001X8GE165-0-7normal-0',
'http://121.37.237.116:28453/rtc/v1/whep/?app=live&stream=4SEDL9C001X8GE1581F5BMD238V00172JR39-0-7normal-0',
'http://121.37.237.116:28453/rtc/v1/whep/?app=live&stream=4SEDL9C001X8GE1581F5BMD238V00172JR53-0-0normal-0'
]
};
},
watch: {
// isLocal(val) {
// this.isNet = !val;
// },
// isNet(val) {
// this.isLocal = !val;
// },
serviceDialog(val) {
if (val) {
getGpsList((res) => {
// const isUsbs = res.list.filter((item) => item.IsUSB);
// this.gpsOptions = isUsbs;
// this.gpsVal = isUsbs.filter((item) => item.selected)[0].Name;
this.gpsOptions = res.list;
this.gpsVal = res.list.filter((item) => item.selected)[0].Name;
});
}
},
},
mounted() {
console.log("ssss", localStorage.getItem("serverMode"));
window.isStandAlone = localStorage.getItem("serverMode")
? JSON.parse(localStorage.getItem("serverMode"))
: true;
let that = this;
if (window.isStandAlone) {
this.$sendElectronChanel("getIniConfig", {});
this.$recvElectronChanel("IniConfig", (e, res) => {
setIP("http://" + res.protocol.host + ":" + res.protocol.port);
// timer = setInterval(() => {
// if ($root_home.$remote.getGlobal("sharedObject").hasService) {
// that.sProcess();
// }
// }, 1000);
});
}
// else {
// timer = setInterval(() => {
// that.sProcess();
// }, 1000);
// }
// console.log($root_home.$remote.getGlobal("sharedObject"));
this.isRememberPassword = JSON.parse(getLocal("isRememberPassword"));
this.checkboxVModel = JSON.parse(getLocal("isRememberPassword"));
this.loginForm.username = JSON.parse(getLocal("username"));
if (this.isRememberPassword) {
this.loginForm.password = JSON.parse(getLocal("password"));
}
},
methods: {
startPlay(url, index) {
// console.log(this.$refs[`webrtc-${index}`][0]);
this.$refs[`webrtc-${index}`][0].startPlay(url);
},
// 是否记住密码变化设置
rememberpwd(val) {
this.isRememberPassword = val;
setLocal("isRememberPassword", val);
},
rememberPassword() {
if (this.isRememberPassword) {
setLocal("password", JSON.stringify(this.loginForm.password));
}
},
submit() {
switch (this.selectedService) {
case "接口服务":
this.submitIP();
break;
case "北斗串口":
this.submitGPS();
break;
}
},
// 连接web
sProcess() {
service_progress({}).then((res) => {
let { code, data } = res;
if (code == 0) {
if (data.current == data.total) {
clearInterval(timer);
this.loading = false;
} else {
this.loading = true;
}
}
});
},
submitIP() {
if (this.servVal == "网络")
if (this.ip && this.port && this.prototype) {
let url = this.prototype + "://" + this.ip + ":" + this.port;
console.log("网络", url);
let isOk = validateURL(url);
//验证url 合法性
if (isOk) {
//网络走这里
window.isStandAlone = false;
setIP(url);
this.serviceDialog = false;
} else {
this.$message.error("url不合法");
}
} else {
this.$message.error("请确保服务地址完整");
}
else {
//单机走这里
window.isStandAlone = true;
setIP("http://127.0.0.1:" + this.localport);
console.log({
protocol: {
port: this.localport,
},
});
this.$sendElectronChanel("getIniConfig", {
protocol: {
port: this.localport,
},
});
this.$recvElectronChanel("IniConfig", (e, res) => {
this.$sendElectronChanel("restart");
});
this.serviceDialog = false;
}
},
submitGPS() {
console.log(this.gpsVal);
if (this.gpsVal)
updateGps({ com: this.gpsVal }, (res) => {
// 设置一个值存到localStorage
localStorage.setItem("gpsCom", this.gpsVal);
this.cancel();
// this.$sendElectronChanel("restart");
});
else this.$message.warning("串口无效,重新选择");
},
cancel() {
this.serviceDialog = false;
},
//服务接入
onService(index) {
//点击切换服务
this.select_id = index;
this.disabled = true;
if (index === 3) {
//弹出自定义弹框
this.disabled = false;
}
},
openServiceSet() {
this.servVal = window.isStandAlone ? "单机" : "网络";
this.serviceDialog = true;
if (this.servVal == "网络") {
let { hostname, port, protocol } = new URL(getIP());
this.ip = hostname;
this.port = port;
this.prototype = protocol.split(":")[0];
} else {
let { hostname, port, protocol } = new URL(getIP());
console.log(new URL(getIP()));
this.localip = hostname;
this.localport = port;
// this.prototype = protocol.split(":")[0]
}
},
onServiceSubmit() { },
showPwd() {
if (this.pwdType === "password") {
this.pwdType = "";
} else {
this.pwdType = "password";
}
},
flyToView() {
let options = JSON.parse(localStorage.getItem("defaultView"));
YJ.Global.setDefaultView(window.Earth1, options);
setTimeout(() => {
new YJ.Tools(window.Earth1).flyHome();
}, 1000);
},
viewerflyToLonLat({ lng, lat, alt }, angle) {
console.log(lng, lat, alt);
console.log();
if (window.Earth1.viewer.entities.getById("flyTmp")) {
window.Earth1.viewer.entities.removeById("flyTmp");
}
let entity = new Cesium.Entity({
id: "flyTmp",
position: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat), Number(alt)),
point: {
pixelSize: 10,
color: Cesium.Color.WHITE.withAlpha(0.9),
outlineColor: Cesium.Color.WHITE.withAlpha(0.9),
outlineWidth: 1,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
});
console.log('entity', entity);
window.Earth1.viewer.entities.add(entity);
// return;
window.Earth1.viewer.flyTo(entity, {
offset: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-angle),
range: alt,
},
});
},
//监听服务数据
getPort() {
console.log("监听服务数据");
ipcRenderer.on("sandTable_udp_server_port", (event, positions, angle) => {
console.log("监听服务数据", positions, angle);
if (positions.length > 0) {
/* const flyToOptions = {
duration: 2,
orientation: {
heading: 0,
pitch: (-angle * Math.PI) / 180,//-85
roll: 0,
},
};
if (positions.length === 1) {
flyToOptions.position = positions[0];
flyToOptions.position.alt = Number(flyToOptions.position.alt) - 500
/!* flyToOptions.destination=Cesium.Cartesian3.fromDegrees(
Number(positions[0].lng),
Number(positions[0].lat),
Number(positions[0].alt)
)*!/
// flyToOptions.position.alt = 8000;
} else {
flyToOptions.positions = positions;
}
*/
// YJ.Global.flyTo(window.Earth1, flyToOptions);
let status = localStorage.getItem('sandTable_udp_client_status')
if (JSON.parse(status)) {
this.viewerflyToLonLat(positions[0], angle)
}
}
});
},
handleLogin() {
// 需要登录就去掉“/dashboard”
let isAllowLogin = $root_home.$remote.getGlobal("sharedObject")
.hasService; //后端服务是否正常
// 单机后端正常
// 单机后端异常
// 网络后端正常
// 网络后端异常
// 网络接口撤掉后端条件
if (!window.isStandAlone || isAllowLogin) {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
/*this.$router.push({path: '/'})
this.loading = false*/
console.log(
this.loginForm.username + "_" + this.loginForm.password
);
let md5pass = this.$md5(
this.loginForm.username + "_" + this.loginForm.password
);
console.log("md5pass md5pass md5pass ", md5pass);
this.$store
.dispatch("Login", {
username: this.loginForm.username,
password: md5pass,
})
.then(() => {
this.$message.success("登录成功");
setLocal("username", JSON.stringify(this.loginForm.username));
this.rememberPassword();
// 无人机
setTimeout(() => {
if (!window.isStandAlone) {
websocket();
}
YJ.on({
ws: true,
host: getIP(), //资源所在服务器地址
username: this.loginForm.username, //用户名 可以不登录(不填写用户名),不登录时无法加载服务端的数据
password: md5pass, //密码 生成方式md5(用户名_密码)
}).then((res) => {
// return;
this.createEarth();
window.$createEarth = this.createEarth;
// YJMap.on({ host: getIP() })
// window.map2d = new YJMap.Map("map2d")
});
this.$router.push({ path: "/" });
this.loading = false;
/* YJ.on({
host: "http://localhost:8890",//资源所在服务器地址
username: this.loginForm.username,//用户名 可以不登录(不填写用户名),不登录时无法加载服务端的数据
password: md5pass//密码 生成方式md5(用户名_密码)
}).then(res => {
window.Earth1 = new YJ.YJEarth('earth')
YJ.Global.openRightClick()
YJ.Global.openLeftClick()
this.$sendChanel("renderNode")
// new YJ.Layer.GDWXImagery()
// new YJ.Layer.ArcgisWXImagery()
// new YJ.Layer.GDLWImagery()
// new YJ.Terrain.Arcgis()
// YJ.Global.showDistanceLegend(true)
this.$store.dispatch("changeSystem", localStorage.getItem("systemSetting") + "#");
this.$store.dispatch("changeModelLibPath", localStorage.getItem("modelLibPath"));
})
this.$router.push({path: '/'})*/
}, 2000);
})
.catch((err) => {
console.log("catch", err);
this.loading = false;
});
} else {
console.log("error submit!!");
return false;
}
});
} else {
this.$message.error("后端服务未正常启动,尝试更换地址或端口");
}
},
//
createEarth() {
let earth = new YJ.YJEarth("earth");
window.Earth1 = earth;
window.$dth.setSdk(window.Earth1);
this.getPort();
this.flyToView();
YJ.Global.openRightClick(window.Earth1);
YJ.Global.openLeftClick(window.Earth1);
// new YJ.Terrain.Arcgis()
this.$store.dispatch(
"changeSystem",
localStorage.getItem("systemSetting") + "#"
);
this.$store.dispatch(
"changeModelLibPath",
localStorage.getItem("modelLibPath")
);
this.$store.dispatch(
"changeGraphLabelLibPath",
localStorage.getItem("graphLabelLibPath")
);
let concurrentcode = localStorage.getItem("concurrentcode");
if (!concurrentcode) {
concurrentcode = 30;
localStorage.setItem("concurrentcode", concurrentcode);
}
YJ.Global.setMaximumRequestsPerServer(concurrentcode);
this.systemSetting = JSON.parse(localStorage.getItem("systemSetting"));
console.log("this.systemSetting", this.systemSetting);
if (this.systemSetting.sheetIndexStatusSwitch) {
setTimeout(() => {
YJ.Global.SheetIndexStatusSwitch(
window.Earth1,
true,
);
}, 1000);
}
this.$sendElectronChanel("getIniConfig");
this.$recvElectronChanel("IniConfig", (e, iniContent) => {
let url = `http://${iniContent.protocol.host}:${iniContent.protocol.port}`;
checkAuth(url, (res) => {
// console.log("checkAuth1111111111111", res);
window.checkAuthIsValid = res.is_valid
if (res.message === "临时授权" || res.message === "永久授权") {
this.$sendChanel("renderNode");
} else {
this.$message.error(res.message + ",请到设置中重新授权!");
}
});
});
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss">
$bg: #2d3a4b;
$light_gray: #eee;
/* reset element-ui css */
.login-container {
.content_h {
>span {
cursor: pointer;
}
}
.serviceSet {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.content {
.el-input {
display: inline-block;
height: 40px;
width: 85%;
margin: 5px 0;
input {
background: transparent;
border: 0px;
// -webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: #fff !important;
}
}
}
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
/* .el-dialog__wrapper {
.el-tabs__content {
height: 150px;
overflow: auto;
}
}*/
.el-dialog__body {
padding: 0 !important;
}
/*.contentBox {
height: 320px;
overflow: auto;
}*/
.serviceContent {
input {
background: transparent !important;
color: #fff !important;
}
}
.btn {
button {
border: 1px solid rgba(0, 255, 255, 0.5) !important;
background: rgba(0, 255, 255, 0.2) !important;
color: #fff !important;
&:hover {
border: 1px solid rgba(0, 255, 255, 1) !important;
color: #00ffff !important;
}
}
}
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
user-select: none;
position: fixed;
height: 100%;
width: 100%;
background-color: $bg;
img {
-webkit-user-drag: none;
}
.content {
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 99;
// .el-form-item__content:last-child {
// border: none;
// }
.titleBox {
display: flex;
justify-content: center;
.titleItem {
display: flex;
align-items: center;
.title {
font-size: 4em;
font-weight: bold;
color: $light_gray;
text-align: center;
}
}
}
.login-form {
//position: absolute;
//left: 0;
//right: 0;
width: 80vw;
height: 21.6vw;
//padding: 35px 35px 15px 35px;
//margin: 120px auto;
background-repeat: no-repeat;
background-image: url("../../assets/images/form_bg.png");
background-size: 100% 100%;
//z-index: 99;
//min-height: 15vw;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
img {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -2vw;
}
.el-form-item {
width: 20vw;
margin-bottom: 0.5vw;
}
.signInBox {
background-repeat: no-repeat;
background-image: url("../../assets/images/signIn.png");
background-size: 100% 100%;
width: 13vw;
text-align: center;
cursor: pointer;
margin-bottom: 1.5vw;
padding: 0.6vw 0;
letter-spacing: 0.2vw;
font-size: 18px;
color: #fff;
background-color: transparent;
border: none;
// background: transparent;
// border: none;
}
.el-button.is-loading:before {
background-color: rgb(116 230 249 / 8%);
}
}
}
.svg-container {
//padding: 6px 5px 6px 15px;
color: $dark_gray;
color: $dark_gray;
vertical-align: middle;
width: 40px;
display: inline-block;
text-align: center;
&_login {
font-size: 20px;
}
}
/*.title {
font-size: 26px;
font-weight: 400;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}*/
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
.checkBoxGroup {
color: #000;
.spans {
font-size: 28px;
align-items: center;
}
.ipBox {
//display: flex;
//flex-direction: row;
//border: 1px solid red;
&>div {
display: flex;
align-self: center;
align-items: center;
.el-input {
display: inline-block;
height: 40px;
width: 50%;
margin: 5px 0;
//input {
// background: transparent;
// border: 0px;
// -webkit-appearance: none;
// border-radius: 0px;
// padding: 12px 5px 12px 15px;
// color: $light_gray;
// height: 47px;
//
// &:-webkit-autofill {
// -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
// -webkit-text-fill-color: #fff !important;
// }
//}
}
}
}
.span {
align-self: flex-end;
color: red;
font-size: 28px;
}
.btn {
margin: 25px 0 10px;
box-sizing: border-box;
width: 100%;
height: 30px;
display: flex;
justify-content: center;
.space {
margin: 0 25px;
}
}
}
.btn {
text-align: center;
}
.service {
z-index: 999;
width: 100vw;
height: 100vh;
position: absolute;
.contentBox {
border: 1.5px solid;
backdrop-filter: blur(2px);
background: linear-gradient(0deg, #00ffff33 0%, #00ffff00 100%),
rgba(0, 0, 0, 0.6);
width: 450px;
height: 400px;
position: absolute;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-image: linear-gradient(to bottom,
rgb(0, 255, 255) 6.25%,
rgb(0, 200, 255) 100%) 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.titleBox {
height: 50px;
.title {
line-height: 50px;
padding-left: 15px;
font-size: 20px;
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
}
.closeBox {
right: 0;
position: absolute;
display: inline-block;
width: 35px;
height: 33px;
border-radius: 0 0 0 90%;
background: #00ffff;
&>span {
font-size: 22px;
position: absolute;
right: 5px;
cursor: pointer;
}
}
}
.hr {
width: 89%;
margin: 0 auto;
border-bottom: 1px solid rgba(204, 204, 204, 0.2);
}
.serviceContent {
flex: auto;
//border: 1px solid red;
padding: 5px 0;
.tab {
border-radius: 5px;
//width: 50%;
width: 300px;
margin: 0 auto;
overflow: hidden;
background: rgba(0, 255, 255, 0.2);
display: flex;
.tab-item {
display: inline-block;
flex: 1;
height: 32px;
line-height: 32px;
text-align: center;
cursor: pointer;
}
.activeService {
border: 1px solid #00ffff;
border-radius: 5px;
}
}
.itemLabel {
width: 85px;
text-align: right;
display: inline-block;
}
.tabPanel {
width: 80%;
margin: 0 auto;
.item {
display: flex;
align-items: center;
margin: 15px 0;
.select {
//flex: auto;
width: 200px;
}
}
}
}
&:after {
display: block;
position: absolute;
content: "";
left: -1.5px;
top: -6px;
width: 70.5px;
height: 6px;
opacity: 1;
background: rgba(0, 255, 255, 1);
clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 6px, 0 6px);
}
}
}
}
</style>