You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
xzjl-ui/pages/home/jl/index.wxss

1123 lines
21 KiB

/* pages/home/jl/index.wxss */
page {
width: 100%;
height: 100%;
overflow: hidden;
}
.call{
width: 100%;
height: 100%;
overflow: hidden;
}
/* 单人头部样式 */
.call1{
position: relative;
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
}
.call1-header {
position: relative;
width: 100%;
height: 92rpx;
margin-top: 144rpx;
display: flex;
justify-content: center;
align-items: center;
}
.tx{
width:72rpx;
height:72rpx;
border-radius: 50%;
margin-right: 18rpx;
background-repeat: no-repeat;
background-size:cover;
/* background-image: url(https://wish-assets.windymuse.com.cn/xy/tx.png); */
}
.txtext{
line-height:72rpx;
color: #9a9a9a;
}
/* 单人头部样式 */
.bkg1{
position: relative;
top: -30rpx;
width:686rpx;
height:990rpx;
box-sizing: border-box;
background-size:cover;
background-image: url(https://ydxxkj-wish.oss-cn-hangzhou.aliyuncs.com/xy/Star.png);
}
.bkg2{
width:100%;
height:100%;
background-repeat: no-repeat;
background-size:cover;
background-image: url(https://ydxxkj-wish.oss-cn-hangzhou.aliyuncs.com/xy/bkg3.png);
}
.bkg3{
width:100%;
height:100%;
background-repeat: no-repeat;
background-size:100% 100%;
padding-top: 110rpx;
background-image: url(https://ydxxkj-wish.oss-cn-hangzhou.aliyuncs.com/xy/bkg1.png);
}
.bkg4{
width:100%;
height: 750rpx;
background-repeat: no-repeat;
background-size:cover;
background-image: url(https://ydxxkj-wish.oss-cn-hangzhou.aliyuncs.com/xy/Dust_2.png);
}
.bkg5{
width:100%;
height:100%;
background-repeat: no-repeat;
background-size:cover;
background-image: url(https://ydxxkj-wish.oss-cn-hangzhou.aliyuncs.com/xy/Dust_1.png);
}
.xxt{
width: 100%;
display: flex;
justify-content: center;
}
.xxt image {
height: 780rpx;
z-index: 1;
}
.gh{
position: absolute;
top: 854rpx;
left: -32rpx;
width:750rpx;
height:182rpx;
background-size: cover;
background-image: url(https://wish-assets.windymuse.com.cn/xy/gh.png);
}
.call1-btn {
flex: 1;
width: 100%;
padding-top: 10rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
z-index: 99999;
}
.dcleft{
position: relative;
margin-top: 10rpx;
width:130rpx;
height:130rpx;
}
.dcleft1{
width: 100%;
height: 100%;
}
.call1-vivid {
position: absolute;
top: 760rpx;
width: 100%;
z-index: 2;
display: flex;
justify-content: space-evenly;
}
.t-progress__canvas--circle{
width:130rpx!important;
height:130rpx !important;
}
@keyframes breathe {
0% {
width: 130rpx;
height: 130rpx;
}
50% {
width: 140rpx;
height: 140rpx;
}
100% {
width: 130rpx;
height: 130rpx;
}
}
.dcright{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 116rpx;
height: 116rpx;
background-color: #F8632A;
border-radius: 50%;
}
.dcleft-right {
position: relative;
width:140rpx;
height:140rpx;
}
.dcright-bg {
display: flex;
justify-content: center;
align-items: center;
animation: breathe 1.5s infinite;
background-color: #FBB093;
border-radius: 50%;
}
.dcright-bgc {
position: relative;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.dclefttxt{
margin-top: 12rpx;
text-align: center;
color: #9a9a9a;
font-size: 28rpx;
}
.dcrighttxt{
text-align: center;
color: #9a9a9a;
font-size: 28rpx;
}
.dcrightwjx{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:80rpx;
height:80rpx;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/wjx.png);
}
.dcleft-middle {
margin: 0 34rpx;
height: 160rpx;
padding-top: 30rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-direction: column;
}
.dchx{
width:200rpx;
height:16rpx;
}
/* 定义和调用动画 */
@keyframes move {
/* 动画的第一个状态和盒子的默认状态相同, 可以省略动画的开始状态代码 */
/* from {
transform: translateX(0);
} */
to {
transform: translateX(200rpx);
/* transform: translateX(-900px); */
/* transform: translateX(-800px); */
}
}
.dchx-box {
position: relative;
top: -16rpx;
width:200rpx;
height:16rpx;
border-radius: 8rpx;
overflow: hidden;
}
.dchx-box-cantainer {
position: absolute;
left: -300rpx;
width:1000rpx;
height:16rpx;
display: flex;
}
.dchx-box .box {
width: 16rpx;
height: 16rpx;
margin-right: 36rpx;
background-size: cover;
animation: move 3s infinite linear;
background-image: url(https://ydxxkj-wish.oss-cn-hangzhou.aliyuncs.com/xy/iconPark-double-right.png);
}
.dchxtxt{
text-align: center;
color: #f76229;
font-size: 28rpx;
}
.dcbs{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width:72rpx;
height:72rpx;
}
.dcbs image {
width: 100%;
height: 100%;
}
.dcrightql{
width:100%;
height:100%;
border-radius: 58.335rpx;
}
.dcrightql1{
position:absolute;
}
.dcrbs{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width:64rpx;
height:72rpx;
}
.dcrbs image {
width: 100%;
height: 100%;
}
.call1-btn-qd {
height: 170rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.lovepic{
width:290rpx;
height:50.67rpx;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/pulse.png);
}
.dchxtxtql{
text-align: center;
color: #9a9a9a;
font-size: 28rpx;
}
.txl{
width:72rpx;
height:72rpx;
border-radius: 50% !important;
margin-left: 30rpx;
}
.txlAcatat {
width:72rpx;
height:72rpx;
border: 4rpx solid #A48A57;
border-radius: 50% !important;
margin-left: 30rpx;
}
.txr{
width:72rpx;
height:72rpx;
margin-right: 30rpx;
border-radius: 50% !important;
background-repeat: no-repeat;
background-size:100% 100%;
}
.txtextl{
color: #9a9a9a;
font-size: 28rpx;
text-align: right;
}
.txtextl-qd{
top: 130rpx;
left: 154rpx;
width: 444rpx;
height: 90rpx;
display: flex;
align-items: center;
}
.text-qd {
width: 360rpx;
color: rgba(108, 108, 108, 1);
font-size: 28rpx;
overflow: hidden; /* 超出部分隐藏 */
}
.text-qd .top {
width: 100%;
white-space: nowrap; /* 文本不换行 */
color: #DE868F;
}
.text-qd view {
display: flex;
justify-content: center;
align-items: center;
}
.jiuchan{
width:48rpx;
height:26rpx;
margin: 0 32rpx;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/jiuchan.png);
}
.txtextr{
color: #9a9a9a;
font-size: 28rpx;
}
.yan1{
width:114rpx;
height:116rpx;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/yan.png);
}
.yan2{
width:114rpx;
height:116rpx;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/yan.png);
}
.yan3{
width:114rpx;
height:116.67rpx;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/yan.png);
}
.yan11{
position: absolute;
width:46rpx;
height:46rpx;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/paw.png);
}
.yan12{
/* position: absolute; */
width:46rpx;
height:46rpx;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/male.png);
}
.yan13{
width:36rpx;
height:46rpx;
background-repeat: no-repeat;
background-size:100% 100%;
background-size: contain;
background-image: url(https://wish-assets.windymuse.com.cn/xy/female.png);
}
.xxtl{
position: relative;
right: -20rpx;
width:686rpx;
height:772rpx;
display: flex;
justify-content: flex-end;
z-index: 2;
}
.xxtl image {
height: 100%;
}
.xxtr{
position: relative;
left: -20rpx;
width:686rpx;
height:772rpx;
display: flex;
justify-content: flex-start;
z-index: 2;
}
.xxtr image {
/* width: 100%; */
height: 100%;
}
.xxtl-xt1 {
position: absolute;
top: 176rpx;
left: 0;
width: 140rpx;
height: 440rpx;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-direction: column;
z-index: 9999;
}
.xxtr-xt2 {
position: absolute;
top: 176rpx;
right: 0;
width: 140rpx;
height: 440rpx;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
z-index: 3;
}
.yanql1{
width:114rpx;
height:116rpx;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/yan.png);
}
.yanql2{
width:114rpx;
height:116rpx;
margin-right: 40rpx;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/yan.png);
}
.yanql3 {
width:114rpx;
height:116rpx;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/yan.png);
}
.yanql4{
width:114rpx;
height:116rpx;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/yan.png);
}
.yanql5{
width:114rpx;
height:116rpx;
margin-left: 40rpx;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/yan.png);
}
.yanql6 {
width:114rpx;
height:116rpx;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/yan.png);
}
.xxtq{
position: absolute;
width:326.67rpx;
height:771.33rpx;
margin-top: 326.67rpx;
margin-left: 212rpx;
background-repeat: no-repeat;
background-size:100% 100%;
}
.xxtq image{
width: 100%;
height: 100%;
}
/* .call1-btn-left {
} */
.call1-btn-middle {
margin: 0 100rpx;
}
/* .call1-btn-right {
} */
.k1{
width:116rpx;
height:116rpx;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/circle.png);
color: rgba(248, 99, 42, 1);
font-size: 72rpx;
display: flex;
align-items: center;
justify-content: center;
}
.k2{
width:116rpx;
height:116rpx;
margin-bottom: 8rpx;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/yan.png);
}
.k3{
width:116rpx;
height:116rpx;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/circle.png);
color: rgba(108, 108, 108, 1);
font-size: 32rpx;
display: flex;
align-items: center;
justify-content: center;
}
.k11{
position: absolute;
width:46rpx;
height:46rpx;
margin-top: 34rpx;
margin-left: 36rpx;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/yst.png);
}
.ktext1{
width:116rpx;
height:116rpx;
margin-top: 12rpx;
text-align: center;
color: #9a9a9a;
font-size: 28rpx;
}
.ktext2{
width:116rpx;
height:116rpx;
margin-top: 12rpx;
text-align: center;
color: #9a9a9a;
font-size: 28rpx;
}
.ktext3{
width:116rpx;
height:116rpx;
margin-top: 12rpx;
text-align: center;
color: #9a9a9a;
font-size: 28rpx;
}
.popup {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.ttpopup{
width: 660rpx;
border-radius: 30rpx;
background-color: rgba(255, 255, 255, 0.9);
color: rgba(16, 16, 16, 1);
font-size: 28rpx;
text-align: center;
padding: 36rpx 46rpx;
box-sizing: border-box;
box-shadow: 2rpx 4rpx 12rpx 0px rgba(0, 0, 0, 0.4);
z-index: 99999;
}
.ttpopup-item {
margin-bottom: 24rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
.ztys{
margin-top: 26rpx;
line-height: 160%;
color: rgba(108, 108, 108, 1);
font-size: 32rpx;
text-align: start;
}
.jkzs{
width: 111.33rpx;
height: 26.67rpx;
display: flex;
flex-direction: column;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/jkzs.png);
}
.aqzs{
width: 111.33rpx;
height: 26.67rpx;
display: flex;
flex-direction: column;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/aqzs.png);
}
.cyzs{
width: 111.33rpx;
height: 26.67rpx;
display: flex;
flex-direction: column;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(https://wish-assets.windymuse.com.cn/xy/cyzs.png);
}
.rjkzs{
line-height: 26.67rpx;
display: flex;
flex-direction: column;
}
.raqzs{
line-height:26.67rpx;
display: flex;
flex-direction: column;
background-repeat: no-repeat;
background-size:100% 100%;
}
.rcyzs{
line-height:26.67rpx;
display: flex;
flex-direction: column;
background-repeat: no-repeat;
background-size:100% 100%;
}
.jltxt{
position: absolute;
right: 0;
top: 1008rpx;
width: 150rpx;
height: 70rpx;
line-height: 70rpx;
border-radius: 20rpx 0px 0px 20rpx;
background: linear-gradient(233.49deg, rgba(248,99,42,1) 10.48%,rgba(249,135,89,1) 89.2%);
text-align: center;
box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.4);
border: 6rpx solid rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1);
font-size: 28rpx;
text-align: center;
}
.tips{
color: rgba(248, 99, 42, 1);
font-size: 24rpx;
text-align: left;
}
.ysfgx{
margin-top: 70rpx;
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 70rpx;
}
.ysfgx image {
width: 480rpx;
height: 22rpx;
}
/* 弹层 */
.pray {
display: flex;
justify-content: center;
}
.pray-box {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
.dialog {
position: absolute;
bottom: 500rpx;
width: 648rpx;
height: 484rpx;
padding: 50rpx;
z-index: 999;
box-sizing: border-box;
line-height: 40rpx;
border-radius: 30rpx;
background-color: rgba(255, 255, 255, 1);
text-align: center;
box-shadow: 2rpx 4rpx 12rpx 0px rgba(0, 0, 0, 0.4);
}
.dialog-item {
display: flex;
justify-content: space-between;
margin-bottom: 38rpx;
}
.dialog-item textarea {
width: 400rpx;
height: 142rpx;
padding: 20rpx;
line-height: 40rpx;
box-sizing: border-box;
border-radius: 10px;
background-color: rgba(255, 255, 255, 1);
color: #9A9A9A;
font-size: 14px;
text-align: right;
border: 1px solid rgba(236, 236, 236, 1);
}
.dialog-item-text {
width: 144rpx;
}
.dialog-item text {
padding-top: 16rpx;
color: #6C6C6C;
font-size: 32rpx;
text-align: center;
}
.dialog-item .duration {
width: 400rpx;
height: 80rpx;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 20rpx;
box-sizing: border-box;
border-radius: 10px;
color: rgba(154, 154, 154, 1);
font-size: 14px;
border: 1px solid rgba(236, 236, 236, 1);
}
.dialog-btn {
padding-top: 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
.dialog-btn button {
width: 210rpx;
height: 70rpx;
border-radius: 20rpx;
background: linear-gradient(233.49deg, rgba(248,99,42,1) 10.48%,rgba(249,135,89,1) 89.2%);
box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.4);
border: 6rpx solid rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28rpx;
}
.dialog-text {
color: rgba(108, 108, 108, 1);
font-size: 36rpx;
text-align: center;
font-weight: 400;
padding-top: 60rpx;
box-sizing: border-box;
margin-bottom: 100rpx;
}
.dialog-text view {
margin-bottom: 30rpx;
}
.dialog-text-end-pray {
color: rgba(108, 108, 108, 1);
font-size: 36rpx;
text-align: center;
font-weight: 400;
padding-top: 10rpx;
box-sizing: border-box;
margin-bottom: 100rpx;
}
.dialog-text-end-pray view {
margin-bottom: 30rpx;
}
.timing {
position: absolute;
bottom: 0;
width: 100%;
height: 434rpx;
z-index: 999;
line-height: 20px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
}
.timing .picker{
padding: 0 28px;
box-sizing: border-box;
}
.timing .timing-title {
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
color: #9A9A9A;
font-size: 14px;
border: 1px solid #F1F1F1;
}
.active {
background-color: #F1F1F1;
z-index: 0;
}
.picker-item {
display: flex;
align-items: center;
justify-content: center;
}
picker-view-column {
height: 364rpx;
}
.energy-success {
position: absolute;
top: 500rpx;
right: 30rpx;
width: 286rpx;
height: 160rpx;
opacity: 0.9;
border-radius: 15px;
background-color: rgba(255, 255, 255, 1);
color: #6C6C6C;
font-size: 14px;
padding: 36rpx 0 0 20rpx;
box-sizing: border-box;
box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.4);
}
.energy-full-box {
position: absolute;
width: 100%;
height: 100%;
z-index: 4;
}
.energy-full {
position: absolute;
top: 500rpx;
right: 230rpx;
width: 286rpx;
height: 160rpx;
opacity: 0.9;
border-radius: 15px;
background-color: rgba(255, 255, 255, 1);
color: #6C6C6C;
font-size: 14px;
padding: 18rpx 0 0 20rpx;
box-sizing: border-box;
box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.4);
z-index: 999;
}
.energy-complete {
position: absolute;
top: 582rpx;
left: 256rpx;
width: 334rpx;
height: 176rpx;
opacity: 0.9;
border-radius: 30rpx;
background-color: rgba(255, 255, 255, 1);
color: #6C6C6C;
font-size: 28rpx;
padding: 36rpx 0 0 20rpx;
box-sizing: border-box;
box-shadow: 2rpx 4rpx 12rpx 0px rgba(0, 0, 0, 0.4);
z-index: 999;
}
.energy-complete :first-child {
margin-bottom: 10rpx;
}
.in-energy {
position: absolute;
top: 500rpx;
right: 130rpx;
width: 484rpx;
height: 434rpx;
padding-top: 80rpx;
box-sizing: border-box;
font-size: 36rpx;
color: #6C6C6C;
border-radius: 30rpx;
background-color: rgba(255, 255, 255, 1);
text-align: center;
box-shadow: 2rpx 4rpx 12rpx 0px rgba(0, 0, 0, 0.4);
z-index: 9999;
}
.in-energy .t-image {
width: 200rpx;
height: 200rpx;
}
.swiper-btn-left {
position: absolute;
top: 646rpx;
left: 10rpx;
width: 30rpx;
height: 90rpx;
background-size: cover;
opacity: 0.5;
background-image: url(https://wish-assets.oss-cn-hangzhou.aliyuncs.com/xy/curved-left.png);
}
.swiper-btn-right {
position: absolute;
top: 646rpx;
right: 10rpx;
width: 30rpx;
height: 90rpx;
background-size: cover;
opacity: 0.5;
background-image: url(https://wish-assets.oss-cn-hangzhou.aliyuncs.com/xy/curved-right.png);
}
.ys-time {
width: 290rpx;
height: 40rpx;
color: rgba(108, 108, 108, 1);
font-size: 28rpx;
text-align: center;
}
.ysjc {
position: absolute;
top: 100rpx;
display: flex;
align-items: center;
}
.call1-cantainer {
width: 100%;
height: 100%;
}