|
@@ -1,177 +0,0 @@
|
|
|
-.container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 20rpx 40rpx;
|
|
|
- height: 50vh; /* 使容器占据整个屏幕高度 */
|
|
|
-}
|
|
|
-
|
|
|
-.input {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: var(--border-radius, 10rpx);
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.btn {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- background-color: var(--primary-color, #1aad19);
|
|
|
- color: #fff;
|
|
|
- border: none;
|
|
|
- border-radius: var(--border-radius, 10rpx);
|
|
|
- text-align: center;
|
|
|
- line-height: 45rpx;
|
|
|
- font-size: 36rpx;
|
|
|
- box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影 */
|
|
|
- transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 背景颜色和阴影过渡效果 */
|
|
|
-}
|
|
|
-
|
|
|
-.btn:active {
|
|
|
- background-color: var(--active-color, #128c13);
|
|
|
- box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2); /* 按钮点击时阴影变化 */
|
|
|
-}
|
|
|
-
|
|
|
-.btn:hover {
|
|
|
- background-color: var(--hover-color, #16b818);
|
|
|
- cursor: pointer; /* 鼠标悬浮时显示手型 */
|
|
|
-}
|
|
|
-
|
|
|
-.error {
|
|
|
- color: red;
|
|
|
- margin-top: 10rpx;
|
|
|
- animation: fadeIn 0.5s ease;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes fadeIn {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.avatar {
|
|
|
- width: 150rpx;
|
|
|
- height: 150rpx;
|
|
|
- border-radius: 50%;
|
|
|
- margin-top: 20rpx;
|
|
|
- object-fit: cover;
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (max-width: 375px) {
|
|
|
- .container {
|
|
|
- padding: 100rpx 20rpx;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- font-size: 28rpx;
|
|
|
- height: 60rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- }
|
|
|
- .input {
|
|
|
- height: 60rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* pages/demo/demo.wxss */
|
|
|
-.root {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.touxiang {
|
|
|
- width: 300rpx;
|
|
|
- height: 300rpx;
|
|
|
- border-radius: 50%;
|
|
|
- margin-top: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.name {
|
|
|
- margin-top: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-/* 弹窗 */
|
|
|
-.pop_root {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- background: rgb(0, 0, 0, 0.6);
|
|
|
- z-index: 1000;
|
|
|
-}
|
|
|
-
|
|
|
-.pop_content {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- background: white;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- border-radius: 30rpx 30rpx 0 0;
|
|
|
-}
|
|
|
-
|
|
|
-.pot_tip {
|
|
|
- font-size: 48rpx;
|
|
|
- margin-top: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.pop_avatar {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: gainsboro;
|
|
|
- font-size: 35rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: center;
|
|
|
- align-items: center;
|
|
|
- margin: 30rpx;
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.pop_img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.pop_name {
|
|
|
- width: 300rpx;
|
|
|
- bottom: 1px solid gray;
|
|
|
- border-radius: 25epx;
|
|
|
- padding-left: 160rpx;
|
|
|
- margin-bottom: 50rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.pop_bot {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 50rpx;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.btn {
|
|
|
- width: 150rpx;
|
|
|
- border: 1px solid gray;
|
|
|
- border-radius: 20rpx;
|
|
|
- text-align: center;
|
|
|
- background: red;
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.btn1 {
|
|
|
- width: 150rpx;
|
|
|
- border: 1px solid gray;
|
|
|
- border-radius: 20rpx;
|
|
|
- text-align: center;
|
|
|
- background: green;
|
|
|
- color: white;
|
|
|
- margin-left: 90rpx;
|
|
|
-}
|