Files
wxProject-w4w/miniprogram/pages/index/index.scss
T
2023-11-08 00:10:38 +08:00

334 lines
7.4 KiB
SCSS

/**index.wxss**/
.container{
display: flex;
position: absolute;
height: 100%;
width:100%;
justify-content: center;
background-color: rgba($color: #fff5d2, $alpha: 1.0);
}
#startPage{
display: flex;
position: absolute;
height: 100%;
width:100%;
justify-content: center;
background-color: rgba($color: #fff5d2, $alpha: 1.0);
}
.text_startPage{
font-size: 60rpx;
}
.buttom_startPage{
background-color: rgba($color: #d2fff4, $alpha: 1);
border-radius: 20rpx;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
display: flex;
justify-content: center;
align-items: center;
}
#gotoSearch{
height: 200rpx;
position: absolute;
top: 300rpx;
width: 80%;
.text_startPage{
font-size: 80rpx;
}
}
#buttom_startPage1{
height: 130rpx;
position: absolute;
top: 550rpx;
width: 50%;
left: 10%;
}
#buttom_startPage2{
height: 130rpx;
position: absolute;
top: 550rpx;
width: 20%;
right: 10%;
}
#buttom_startPage4{
height: 130rpx;
position: absolute;
top: 720rpx;
width: 50%;
right: 10%;
}
#buttom_startPage3{
height: 130rpx;
position: absolute;
top: 720rpx;
width: 20%;
left: 10%;
}
#tips_startPage{
height: 80rpx;
position: absolute;
top: 1000rpx;
width: 80%;
}
.test{
height: 100rpx;
width: 100rpx;
position: relative;
top:1200rpx;
margin: 50rpx;
// left:-200rpx;
}
.miao_page{
height: 100%;
width: 100%;
position: absolute;
}
// 相机界面 丑是丑了点,后面再优化吧
#page_camera{
background-color: black;
display: flex;
align-items: center;
justify-content: center;
translate:0 100%;
#camera{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
}
#buttom_takePhoto{
height: 150rpx;
width: 150rpx;
border-radius: 50%;
background-color: rgba($color: #15aa87, $alpha: 1);
position: absolute;
bottom: 120rpx;
display: flex;
align-items: center;
justify-content: center;
#buttom_takePhoto1{
height: 120rpx;
width: 120rpx;
border-radius: 50%;
background-color: rgb(240, 255, 247);
}
}
#page_camera_background{
height: 400rpx;
width: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
// background-color: white;
// background-color: black;
bottom: 0rpx;
left:0rpx;
}
#page_camera_back{
height: 110rpx;
width: 110rpx;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
// background-color: aquamarine;
bottom: 140rpx;
left:80rpx;
// font-size: 150rpx;
// font-weight: 900;
// font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#page_camera_local{
height: 110rpx;
width: 110rpx;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
// background-color: aquamarine;
bottom: 140rpx;
right:80rpx;
// font-size: 150rpx;
// font-weight: 900;
// font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
}
.title{
width: 100%;
height: 10%;
background-color: aqua;
position:absolute;
top:0rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: x-large;
.page_back{
height: 70rpx;
width: 70rpx;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
// background-color: aquamarine;
top: 50rpx;
left:30rpx;
// font-size: 150rpx;
// font-weight: 900;
// font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
}
.content{
position:absolute;
width: 100%;
height: 90%;
top: 10%;
overflow: scroll;
}
// 知识库界面
#page_lib{
background-color: rgb(28, 41, 212);
display: flex;
align-items: center;
justify-content: center;
translate:0 100%;
}
// 历史记录
#page_history{
background-color: rgba($color: #fff5d2, $alpha: 1.0);
.date1{
background-color: rgba($color: #fff5d2, $alpha: 1);
height: 50rpx;
width: 50%;
position: absolute;
top: 160rpx;
left: 10%;
}
.content{
flex-direction: column;
justify-items: center;
align-items: flex-start;
.history_part{
height: 210rpx;
width: auto;
background-color: violet;
margin:30rpx;
// margin-top:30rpx;
// margin-left: 30rpx;
// margin-right: 30rpx;
padding: 15rpx;
.history_time{
// height: 30rpx;
width:fit-content;
// margin-left: 10rpx;
padding:5rpx;
background-color: whitesmoke;
}
.history_content{
display: flex;
justify-self: start;
overflow: scroll;
.picture{
margin-left: 0;
height: auto;
width: auto;
}
}
}
}
.picture{
background-color: rgba($color: #ffffff, $alpha: 1);
height: 170rpx;
width: 25%;
margin: 10rpx;
}
.picture1{
background-color: rgba($color: #ffffff, $alpha: 1);
height: 170rpx;
width: 25%;
position: absolute;
top: 230rpx;
left: 10%;
}
.picture2{
background-color: rgba($color: #ffffff, $alpha: 1);
height: 170rpx;
width: 25%;
position: absolute;
top: 230rpx;
left: 38%;
}
#page_history_back{
height: 90rpx;
width: 90rpx;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
// background-color: aquamarine;
top: 65rpx;
left:70rpx;
// font-size: 150rpx;
// font-weight: 900;
// font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
translate:0 100%;
}
// 收藏界面
#page_collect{
background-color: rgba($color: #fff5d2, $alpha: 1.0);
display: flex;
align-items: center;
justify-content: center;
.collect1{
background-color: rgba($color: #ffffff, $alpha: 1);
height: 170rpx;
width: 25%;
position: absolute;
top: 200rpx;
left: 10%;
}
.collect2{
background-color: rgba($color: #ffffff, $alpha: 1);
height: 170rpx;
width: 25%;
position: absolute;
top: 200rpx;
left: 38%;
}
#page_collect_back{
height: 90rpx;
width: 90rpx;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
// background-color: aquamarine;
top: 65rpx;
left:70rpx;
// font-size: 150rpx;
// font-weight: 900;
// font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
translate:0 100%;
}