Fetch the repository succeeded.
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
position: relative;
background-color: #212121;
}
// 背景logo区域start
.pg-bg {
position: absolute;
width: 100%;
height: 100vh;
background: url("pg_logo-bg.png") no-repeat top center;
-o-background-size: 100vh auto;
background-size: 100vh auto;
opacity: 0.2;
z-index: -1;
}
// 背景logo区域end
//核心内容区域
.container {
width: 100%;
height: 100vh;
position: absolute;
z-index: 1;
top: 0;
left: 0;
//小logo样式,需要的话就加
a {
display: block;
height: 52px;
width: 130px;
margin: 20px 0 0 50px;
cursor: pointer;
h1 {
display: block;
height: 52px;
width: 130px;
background: url("pg_logo.png") no-repeat 0 0;
text-indent: -9999px;
overflow: hidden;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
}
//<!-- 点名按钮区域start -->
.callContent,
.regNameArea {
padding: 20px;
color: #fff;
position: absolute;
top: 20%;
left: 50%;
-webkit-transform: translate(-50%, -20%);
-moz-transform: translate(-50%, -20%);
-ms-transform: translate(-50%, -20%);
-o-transform: translate(-50%, -20%);
transform: translate(-50%, -20%);
.button {
text-align: center;
font-weight: 600;
font-size: 30px;
white-space: nowrap;
.outline {
color: #fff;
overflow: hidden;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
font-weight: 400;
padding: 10px 30px;
line-height: 45px;
text-decoration: none;
margin-right: 20px;
cursor: pointer;
text-align: center;
-webkit-transition: all 300ms;
-o-transition: all 300ms;
-moz-transition: all 300ms;
transition: all 300ms;
}
.outline:before,
.outline:after,
.outline .lines:before,
.outline .lines:after {
content: "";
height: 2px;
left: 0;
position: absolute;
top: 0;
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
-o-transition: -o-transform 300ms;
-moz-transition: transform 300ms, -moz-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms,
-moz-transform 300ms, -o-transform 300ms;
width: 100%;
}
.outline:before {
bottom: 0;
top: auto;
}
.outline .lines {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.outline .lines:before,
.outline .lines:after {
height: 100%;
width: 2px;
}
.outline .lines:after {
left: auto;
right: 0;
}
.outline:hover {
font-size: 35px;
}
.outline:hover:before {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.outline:hover:after {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.outline:hover .lines:before {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.outline:hover .lines:after {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
#button1:before,
#button1:after,
#button1 .lines:before,
#button1 .lines:after,
#button4:before,
#button4:after,
#button4 .lines:before,
#button4 .lines:after {
background-color: #f8c013;
}
#button2:before,
#button2:after,
#button2 .lines:before,
#button2 .lines:after,
#button5:before,
#button5:after,
#button5 .lines:before,
#button5 .lines:after {
background-color: #dd483f;
}
#button3:before,
#button3:after,
#button3 .lines:before,
#button3 .lines:after,
#button6:before,
#button6:after,
#button6 .lines:before,
#button6 .lines:after {
background-color: #56c5ff;
}
}
.name {
margin-top: 50px;
text-align: center;
font-size: 60px;
font-weight: 600;
letter-spacing: 3px;
}
}
// 识别区域
.regNameArea {
[name="nameArea"] {
font-size: 18px;
margin-bottom: 30px;
opacity: 0.8;
padding: 10px;
outline: none;
&::placeholder {
font-size: 17px;
font-family: "微软雅黑";
}
}
}
.callContent {
display: none;
}
// 返回上一页
.videoBack {
display: none;
position: fixed;
top: 40%;
transform: translateY(-40%);
cursor: pointer;
z-index: 999;
.back {
position: absolute;
top: 0;
left: -80px;
display: flex;
align-items: center;
width: 120px;
height: 80px;
background-color: #fff;
color: #1d1d1d;
transition: all 0.3s;
.clickback {
display: flex;
flex-direction: column;
width: 80px;
height: 80px;
justify-content: center;
align-items: center;
svg {
width: 30px;
height: 30px;
}
}
.tit {
position: absolute;
top: 0;
left: 80px;
z-index: 1;
width: 40px;
height: 80px;
background-color: #fff;
line-height: 80px;
text-align: center;
svg {
width: 20px;
height: 20px;
}
}
&:hover {
color: #1d1d1d;
left: 0px;
}
}
}
// <!-- 点名按钮区域end -->
//<!-- 生成记录名字区域start -->
.selectNames {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
bottom: 20px;
left: 0;
.nameblock {
padding: 10px 15px;
border-radius: 3px;
background: #fff;
color: #a92733;
font-weight: 600;
font-size: 30px;
margin: 20px;
-webkit-box-shadow: 0 3px 10px #fff, 0 0 10px;
box-shadow: 0 3px 10px #fff, 0 0 10px;
}
}
// <!-- 生成记录名字区域end -->
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。