wszhyWx/src/App.vue

129 lines
2.5 KiB
Vue
Raw Normal View History

2023-09-28 09:50:50 +00:00
<template>
<div id="app">
<router-view />
</div>
</template>
2023-10-05 03:59:23 +00:00
<script>
export default {
data(){
return {
}
},
mounted(){
let inputList = document.querySelectorAll('input');
for (let index = 0; index < inputList.length; index++) {
inputList[index].onfocus = this.selectValue();//input放入焦点全选文本
}
},
methods:{
//全选文本
selectValue(e) {
e.currentTarget.select();
}
},
}
</script>
2023-09-28 09:50:50 +00:00
<style lang="scss">
* {
padding: 0;
margin: 0;
outline: none;
font-size: 16px;
box-sizing: border-box;
font-family: Microsoft YaHei;
font-weight: 400;
color: #fff;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
@font-face {
font-family: Oswald;
src: url(./assets/ttf/Oswald-Medium.ttf);
}
@font-face {
font-family: Alibaba PuHuiTi;
src: url(./assets/ttf/ALIBABA-PUHUITI-MEDIUM.OTF);
}
@font-face {
font-family: Alibaba PuHuiTiR;
src: url(./assets/ttf/ALIBABA-PUHUITI-REGULAR.OTF);
}
@font-face {
font-family: Alimama ShuHeiTiB;
src: url(./assets/ttf/Alimama_ShuHeiTi_Bold.ttf);
}
.main-title {
width: 100%;
height: 41px;
background: url(./assets/image/main-title.png) no-repeat center;
background-size: 100% 100%;
padding-left: 23px;
span {
line-height: 41px;
font-size: 20px;
font-family: Alibaba PuHuiTi;
font-weight: bold;
color: #DBE8FF;
background: linear-gradient(180deg, rgba(49, 190, 255, 1) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.view-content {
width: 100%;
height: 327px;
border: 1px solid;
margin-top: 8px;
border-image: linear-gradient(180deg, rgba(142, 179, 221, 0.5) 0%, transparent 100%) 10 10;
background: linear-gradient(180deg, rgba(6, 72, 167, 0.5) 0%, rgba(6, 72, 167, 0) 100%);
}
.input-50 {
.input-title {
font-size: 16px;
font-family: Alibaba PuHuiTiR;
font-weight: 400;
color: #FFF9F9;
}
input,
.input {
width: 100%;
height: 50px;
background: url(./assets/image/left1-input.png) no-repeat center;
background-size: 100% 100%;
padding-left: 15px;
font-size: 20px;
font-family: Alibaba PuHuiTiR;
font-weight: 400;
color: #648cbb;
border: none;
line-height: 50px;
&.green{
color: #3CFDFF;
}
}
&.input-100 {
width: 100% !important;
}
}
</style>