/**index.wxss**/ page{ // // 主要为各个背景 // --main-color:rgb(246, 255, 252); // // 目前为主界面的那几个按钮 // --secondary-color:rgba(125, 235, 202, 0.205); // // 各界面顶部栏的颜色 // --tertiary-color:rgba(123, 245, 245, 0.5); // // 标题文字颜色 --text-color:rgb(199, 255, 204); } .container{ display: flex; position: absolute; height: 100%; width:100%; justify-content: center; // background-color: var(--main-color); } #startPage{ display: flex; position: absolute; height: 100%; width:100%; justify-content: center; background-color: var(--main-color); } .text_startPage{ font-size: 60rpx; color:var(--text-color) } .buttom_startPage{ background-color: var(--secondary-color); 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: rgb(240, 255, 247); border-radius: 50%; 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: var(--tertiary-color); position:absolute; top:0rpx; display: flex; justify-content: center; align-items: center; font-size: x-large; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; letter-spacing:10rpx; .page_back{ height: 70rpx; width: 70rpx; position: absolute; display: flex; align-items: center; justify-content: center; // rotate: -90deg; // background-color: aquamarine; // top: 20%; 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; } .search{ position: relative; height: 60rpx; display: flex; justify-content: center; align-items: center; // background-color: yellowgreen; .search_bar{ // border: 2rpx solid rgb(104, 104, 104); overflow: hidden; height: 60rpx; width: 450rpx; position: relative; // left: 40rpx; border-radius: 15rpx; .search_icon{ height: 60rpx; width: 60rpx; display: flex; justify-content: center; align-items: center; background-color:rgb(189, 189, 189); image{ height: 45rpx; width: 45rpx; } } .search_input{ position: absolute; width: 390rpx; height: 60rpx; background-color: rgb(241, 241, 241); top: 0; left: 60rpx; // padding-left: 15rpx; } } .search_button{ // border: 2rpx solid rgb(104, 104, 104); height: 56rpx; width: 120rpx; background-color: rgb(146, 146, 146); position: absolute; font-size: larger; color: whitesmoke; top: 0; left: 530rpx; display: flex; justify-content: center; align-items: center; border-radius: 15rpx; } } // 知识库界面 #page_lib{ background-color: var(--main-color); display: flex; align-items: center; justify-content: center; translate:0 100%; .content{ display: flex; flex-direction: column; padding-top: 30rpx; // padding-bottom: 40rpx; .lib_search{ margin-bottom: 20rpx; // .lib_search_input{ // // background-color: yellow; // } } } } // 单配料卡片样式 .ingredient_card{ background-color: rgba($color: #ffffff, $alpha: 1); border-radius: 15rpx; height: 200rpx; width: auto; margin:15rpx 20rpx 15rpx 10rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; .node_content{ position: relative; display: block; height: 100%; width: auto; margin-left: 25rpx; border-radius: 15rpx; background-color: rgba($color: #ffffff, $alpha: 1); // background-color: var(--tertiary-color); // overflow: hidden; ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .node_name{ font-size: 31rpx; height:50rpx; width:max-content; background-color: rgba(150, 145, 138, 0.5); padding:0rpx 10rpx; display: flex; align-items: center; border-radius: 15rpx; position: absolute; top:15rpx; left:20rpx; max-width: 230rpx; overflow: scroll; white-space: nowrap; // justify-content: center; } .node_name_en{ height:45rpx; position: absolute; top:80rpx; left:20rpx; max-width: 338rpx; } .node_adi{ font-size: 31rpx; height:45rpx; max-width:338rpx; // background-color: rgba(150, 145, 138, 0.5); // padding:0rpx 10rpx; display: flex; align-items: center; border-radius: 15rpx; position: absolute; bottom:20rpx; left:20rpx; overflow: scroll; white-space: nowrap; .adi_title{ height:45rpx; background-color:salmon; padding:0rpx 10rpx; } .adi_content{ height:45rpx; background-color:rgb(224, 224, 224); padding:0rpx 10rpx; } } .node_danger{ font-size: 31rpx; height:50rpx; width: 80rpx; background-color: rgba(150, 145, 138, 0.5); position: absolute; left:299rpx; top:15rpx; // padding: 10rpx; display: flex; align-items: center; justify-content: center; border-radius: 15rpx; background-color: tomato; // view{ // position: relative; // top:-0.5rpx; // } } .node_safe{ font-size: 31rpx; height:50rpx; width: 80rpx; background-color: rgba(150, 145, 138, 0.5); position: absolute; left:299rpx; top:15rpx; // padding: 10rpx; display: flex; align-items: center; justify-content: center; border-radius: 15rpx; background-color:springgreen; // view{ // position: relative; // top:-0.5rpx; // } } .node_scores{ font-size: 31rpx; height:50rpx; width: 135rpx; background-color: rgba(150, 145, 138, 0.5); position: absolute; left:399rpx; top:15rpx; // padding: 4rpx 0rpx 6rpx 10rpx; // padding-left: 10rpx; display: flex; align-items: center; // justify-content: center; border-radius: 15rpx; overflow: hidden; .scores_title{ height:50rpx; width: 80rpx; background-color:salmon; display: flex; align-items: center; justify-content: center; } .scores_num{ height:50rpx; width: 65rpx; background-color:rgb(224, 224, 224); display: flex; align-items: center; justify-content: center; } } .node_risk{ font-size: 31rpx; height:50rpx; width: 120rpx; position: absolute; left:560rpx; top:15rpx; // padding: 0rpx 6rpx 6rpx 13rpx; display: flex; align-items: center; justify-content: center; border-radius: 15rpx; overflow: hidden; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .node_extra{ height:95rpx; width: 256rpx; // background-color: white; border: 3rpx solid rgba(0, 0, 0, 0.356); position: absolute; left:400rpx; bottom:15rpx; padding: 5rpx 10rpx 10rpx 10rpx; border-radius: 15rpx; display: flex; flex-direction: column; align-items: center; overflow: scroll; .node_extra_empty{ margin: auto; font-size: 45rpx; } .node_ex_content{ margin:5rpx; height: 40rpx; width: 240rpx; display: flex; border-radius: 15rpx; align-items: center; justify-content: center; } } } } // 历史记录 #page_history{ background-color: var(--main-color); // .date1{ // background-color: rgba($color: #fff5d2, $alpha: 1); // height: 50rpx; // width: 50%; // position: absolute; // top: 160rpx; // left: 10%; // } .content{ display:flex; flex-direction: column; padding-top: 10rpx; ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } // justify-items: center; // align-items: flex-start; .history_part{ height: 210rpx; width: auto; border-radius: 15rpx; background-color: rgba(91, 95, 94, 0.263); margin:15rpx 25rpx; // margin-top:30rpx; // margin-left: 30rpx; // margin-right: 30rpx; padding: 15rpx; .history_time{ // height: 30rpx; width:fit-content; // margin-left: 10rpx; border-radius: 15rpx; padding:4rpx 10rpx; background-color: whitesmoke; font-size: 25rpx; } .history_content{ display: flex; justify-self: start; overflow: scroll; .picture{ margin-left: 0; height: 150rpx; width: 150rpx; border-radius: 15rpx; // overflow: hidden; image{ border-radius: 15rpx; } } } } } .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: var(--main-color); translate:0 100%; .content{ display: flex; flex-direction: column; padding-top: 10rpx; .node{ background-color: rgba($color: #ffffff, $alpha: 1); border-radius: 15rpx; height: 200rpx; width: auto; margin:10rpx 20rpx 10rpx 10rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; .node_content{ position: relative; display: block; height: 100%; width: auto; margin-left: 25rpx; border-radius: 15rpx; background-color: rgba($color: #ffffff, $alpha: 1); // overflow: hidden; .node_img{ border:3rpx solid slategrey; border-radius: 15rpx; height: 160rpx; width: 160rpx; position: absolute; left: 20rpx; top: 20rpx; } .node_date{ font-size: 31rpx; height:50rpx; width: 170rpx; background-color: rgba(150, 145, 138, 0.5); position: absolute; left:200rpx; top:20rpx; // padding: 4rpx 0rpx 6rpx 10rpx; padding-left: 10rpx; display: flex; align-items: center; // justify-content: center; border-radius: 15rpx; } .node_scores{ font-size: 31rpx; height:50rpx; width: 135rpx; background-color: rgba(150, 145, 138, 0.5); position: absolute; left:399rpx; top:20rpx; // padding: 4rpx 0rpx 6rpx 10rpx; padding-left: 10rpx; display: flex; align-items: center; // justify-content: center; border-radius: 15rpx; } .node_risk{ font-size: 31rpx; height:50rpx; width: 120rpx; position: absolute; left:560rpx; top:20rpx; // padding: 0rpx 6rpx 6rpx 13rpx; display: flex; align-items: center; justify-content: center; border-radius: 15rpx; overflow: hidden; } .node_remark{ height: 40%; width: 460rpx; background-color: tan; position: absolute; left:200rpx; bottom:20rpx; padding: 5rpx 10rpx 10rpx 10rpx; border-radius: 15rpx; display: flex; align-items: center; justify-content: center; font-size: 60rpx; overflow: hidden; } } } } // display: flex; // align-items: center; // justify-content: center; // .collect2{ // background-color: rgba($color: #ffffff, $alpha: 1); // height: 170rpx; // width: 25%; // } // #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; // } } //个性化界面 #page_style{ background-color: var(--main-color); translate:0 100%; .content{ display: flex; flex-wrap: wrap; justify-content:center; padding-top: 20rpx; padding-bottom: 40rpx; .choose_color{ box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; width: 300rpx; height: 300rpx; margin: 20rpx; border-radius: 30rpx; display:flex; flex-direction: row; overflow: hidden; .node{ width:34%; height: 300rpx; background-color: white; } // background-color: white; // background: linear-gradient(to right,rgb(255, 255, 255) 33%,blue 66%,rgb(0, 0, 0)100%); } } } //遮罩 #curtain{ // background-color: rgba(0, 0, 0, 0.19); background-color: rgba(0, 0, 0, 0); height: 100%; width: 100%; position: absolute; top: 0; left: 0; opacity: 1; // transform: ; } //查询结果 #page_result{ height: 89%; width: 100%; position: absolute; bottom: 0; left: 0; overflow: hidden; translate: 0 100%; // background-color: rgba($color: #ffffff, $alpha: 1.0); background-color: var(--main-color); border-radius: 40rpx; .title{ .page_star{ height: 70rpx; width: 70rpx; position: absolute; display: flex; align-items: center; justify-content: center; // background-color: aquamarine; // top: 50rpx; right:30rpx; // font-size: 150rpx; // font-weight: 900; // font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } .page_editRemark{ height: 70rpx; width: 70rpx; position: absolute; display: flex; align-items: center; justify-content: center; // background-color: aquamarine; // top: 50rpx; right:100rpx; // font-size: 150rpx; // font-weight: 900; // font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } } .content{ position: relative; display: flex; flex-direction:row; justify-content: center; overflow: scroll; .result_isSafe{ background-color: #bfdfd7; width: 300rpx; height: 300rpx; margin:30rpx; border-radius: 25rpx; 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; font-size: 150rpx; } .result_circle{ background-color: #bfdfd7; width: 300rpx; height: 300rpx; margin:30rpx; border-radius: 25rpx; display: flex; justify-content: center; align-items: center; font-size: 80rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; .circle{ position:absolute; width: 110px; height: 110px; border-radius: 50%; // background-color: #fff5d2; clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%); transform: rotate(45deg); } } .result_content{ display: flex; flex-direction: column; padding-top: 20rpx; position: absolute; top: 380rpx; left: 0; width: 100%; height: auto; // padding-bottom: 40rpx; .lib_search{ margin-bottom: 20rpx; // .lib_search_input{ // // background-color: yellow; // } } .node{ background-color: rgba($color: #ffffff, $alpha: 1); border-radius: 15rpx; height: 200rpx; width: auto; margin:15rpx 20rpx 15rpx 10rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; .node_content{ position: relative; display: block; height: 100%; width: auto; margin-left: 25rpx; border-radius: 15rpx; background-color: rgba($color: #ffffff, $alpha: 1); // overflow: hidden; ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } // .node_nameBar{ // background-color: teal; // position: absolute; // top:20rpx; // left:20rpx; // overflow: scroll; // height: 500rpx; // width: 350rpx; // display:flex; // // flex-direction: column; // justify-content: center; // align-items: flex-start; // } .node_name{ font-size: 31rpx; height:50rpx; width:max-content; background-color: rgba(150, 145, 138, 0.5); padding:0rpx 10rpx; display: flex; align-items: center; border-radius: 15rpx; position: absolute; top:15rpx; left:20rpx; max-width: 230rpx; overflow: scroll; white-space: nowrap; // justify-content: center; } .node_name_en{ height:45rpx; position: absolute; top:80rpx; left:20rpx; max-width: 338rpx; } .node_adi{ font-size: 31rpx; height:45rpx; max-width:338rpx; // background-color: rgba(150, 145, 138, 0.5); // padding:0rpx 10rpx; display: flex; align-items: center; border-radius: 15rpx; position: absolute; bottom:20rpx; left:20rpx; overflow: scroll; white-space: nowrap; .adi_title{ height:45rpx; background-color:salmon; padding:0rpx 10rpx; } .adi_content{ height:45rpx; background-color:rgb(224, 224, 224); padding:0rpx 10rpx; } } .node_danger{ font-size: 31rpx; height:50rpx; width: 80rpx; background-color: rgba(150, 145, 138, 0.5); position: absolute; left:299rpx; top:15rpx; // padding: 10rpx; display: flex; align-items: center; justify-content: center; border-radius: 15rpx; background-color: tomato; // view{ // position: relative; // top:-0.5rpx; // } } .node_safe{ font-size: 31rpx; height:50rpx; width: 80rpx; background-color: rgba(150, 145, 138, 0.5); position: absolute; left:299rpx; top:15rpx; // padding: 10rpx; display: flex; align-items: center; justify-content: center; border-radius: 15rpx; background-color:springgreen; // view{ // position: relative; // top:-0.5rpx; // } } .node_scores{ font-size: 31rpx; height:50rpx; width: 135rpx; background-color: rgba(150, 145, 138, 0.5); position: absolute; left:399rpx; top:15rpx; // padding: 4rpx 0rpx 6rpx 10rpx; // padding-left: 10rpx; display: flex; align-items: center; // justify-content: center; border-radius: 15rpx; overflow: hidden; .scores_title{ height:50rpx; width: 80rpx; background-color:salmon; display: flex; align-items: center; justify-content: center; } .scores_num{ height:50rpx; width: 65rpx; background-color:rgb(224, 224, 224); display: flex; align-items: center; justify-content: center; } } .node_risk{ font-size: 31rpx; height:50rpx; width: 120rpx; position: absolute; left:560rpx; top:15rpx; // padding: 0rpx 6rpx 6rpx 13rpx; display: flex; align-items: center; justify-content: center; border-radius: 15rpx; overflow: hidden; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .node_extra{ height:95rpx; width: 256rpx; background-color: white; border: 3rpx solid rgba(0, 0, 0, 0.356); position: absolute; left:400rpx; bottom:15rpx; padding: 5rpx 10rpx 10rpx 10rpx; border-radius: 15rpx; display: flex; flex-direction: column; align-items: center; overflow: scroll; .node_extra_empty{ margin: auto; font-size: 45rpx; } .node_ex_content{ margin:5rpx; height: 40rpx; width: 240rpx; display: flex; border-radius: 15rpx; align-items: center; justify-content: center; } } } } } } } //遮罩2 #curtain2{ background-color: rgba(0, 0, 0, 0.19); // background-color: rgba(0, 0, 0, 0); height: 100%; width: 100%; position: absolute; top: 0; left: 0; opacity: 1; // transform: ; } // 收藏的时候设置备注的输入框 #star_setRemark{ height: 200rpx; width: 70%; position: absolute; top: 30%; left: 15%; // overflow: hidden; translate: 0 1300rpx; background-color: rgba($color: #ffffff, $alpha: 1.0); border-radius: 25rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; .title{ height: 30%; border-radius: 25rpx 25rpx 0 0; letter-spacing:0rpx; } .input{ height: 120rpx; width: 90%; position: absolute; top:30%; right: 5%; border-radius: 25rpx; overflow: hidden; input{ // background-color: #a79f84; height: 100%; // width: 100%; display: flex; justify-content: center; font-size: 60rpx; } } .verify{ position: absolute; top:110%; right: 0%; background-color: greenyellow; height: 100rpx; width: 200rpx; font-size: 50rpx; display: flex; justify-content: center; align-items: center; border-radius: 25rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } .cancel{ position: absolute; top:110%; left: 0%; background-color: tomato; height: 100rpx; width: 200rpx; font-size: 50rpx; display: flex; justify-content: center; align-items: center; border-radius: 25rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } } #editRemark{ height: 200rpx; width: 70%; position: absolute; top: 30%; left: 15%; // overflow: hidden; translate: 0 1300rpx; background-color: rgba($color: #ffffff, $alpha: 1.0); border-radius: 25rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; .title{ height: 30%; border-radius: 25rpx 25rpx 0 0; letter-spacing:0rpx; } .input{ height: 120rpx; width: 90%; position: absolute; top:30%; right: 5%; border-radius: 25rpx; overflow: hidden; input{ // background-color: #a79f84; height: 100%; // width: 100%; display: flex; justify-content: center; font-size: 60rpx; } } .verify{ position: absolute; top:110%; right: 0%; background-color: greenyellow; height: 100rpx; width: 200rpx; font-size: 50rpx; display: flex; justify-content: center; align-items: center; border-radius: 25rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } .cancel{ position: absolute; top:110%; left: 0%; background-color: tomato; height: 100rpx; width: 200rpx; font-size: 50rpx; display: flex; justify-content: center; align-items: center; border-radius: 25rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } } #removeCollectionVerify{ height: 130rpx; width: 70%; position: absolute; top: 30%; left: 15%; // overflow: hidden; translate: 0 1300rpx; background-color: rgba($color: #ffffff, $alpha: 1.0); border-radius: 25rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; .title{ height: 100%; background-color: unset; border-radius: 25rpx 25rpx 0 0; } .verify{ position: absolute; top:110%; right: 0%; background-color: greenyellow; height: 100rpx; width: 200rpx; font-size: 50rpx; display: flex; justify-content: center; align-items: center; border-radius: 25rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } .cancel{ position: absolute; top:110%; left: 0%; background-color: tomato; height: 100rpx; width: 200rpx; font-size: 50rpx; display: flex; justify-content: center; align-items: center; border-radius: 25rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } } //测试按钮 .testButtom{ height: auto; width: auto; position: absolute; bottom: 100rpx; left:50rpx; background-color: royalblue; } .testButtom1{ height: auto; width: auto; position: absolute; bottom: 100rpx; left:250rpx; background-color: royalblue; } .testButtom2{ height: auto; width: auto; position: absolute; bottom: 100rpx; left:450rpx; background-color: royalblue; }