M0117
/
gary_wms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

select3 做到一半

main
10994015 1 year ago
parent
7364be5d5f
commit
1d4904e60a
5 changed files with 306 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 106
      wms/chengyanUI/select3.css
  2. 1
      wms/chengyanUI/select3.css.map
  3. 88
      wms/chengyanUI/select3.php
  4. 110
      wms/chengyanUI/select3.scss
  5. 2
      wms/cont/api/postElevatorPricereview.php

106
wms/chengyanUI/select3.css
View File

@ -0,0 +1,106 @@
body {
background-color: #aaa;
padding: 150px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
.select3 {
position: relative;
}
.select3 > .input {
width: 250px;
padding: 12px 15px;
border-radius: 10px;
background-color: #fff;
font-size: 13px;
cursor: pointer;
position: relative;
}
.select3 > .input > i {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
font-size: 12px;
}
.select3 > .select {
display: none;
position: absolute;
top: 44px;
left: 0;
width: 250px;
padding: 16px 10px;
background-color: #fff;
border-radius: 10px;
box-sizing: border-box !important;
overflow: hidden;
animation: fadein 0.085s linear;
}
.select3 > .select > input[type=text] {
outline: none;
border: 1px #999 solid;
width: 100%;
border-radius: 4px;
height: 31px;
padding: 12px;
margin-bottom: 3px;
}
.select3 > .select > .options {
overflow-y: scroll;
max-height: 205px;
height: auto;
}
.select3 > .select > .options::-webkit-scrollbar {
width: 7px;
}
.select3 > .select > .options::-webkit-scrollbar-track {
background-color: transparent;
background-size: 10px 10px;
}
.select3 > .select > .options::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 5px;
}
.select3 > .select > .options > label {
width: 100%;
display: block;
padding: 10px;
cursor: pointer;
border-bottom: 1px #ccc solid;
transition: 0.2s;
}
.select3 > .select > .options > label:hover {
transform: scale(1.05);
}
.select3 > .select > .options > label.check {
background-color: #5BC0DE;
color: #fff;
animation: check 0.1s linear;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes check {
0% {
transform: translateX(0px);
background-color: rgba(91, 192, 222, 0);
}
0% {
transform: translateX(180px);
}
100% {
transform: translateX(0px);
background-color: rgb(91, 192, 222);
}
}/*# sourceMappingURL=select3.css.map */

1
wms/chengyanUI/select3.css.map
View File

@ -0,0 +1 @@
{"version":3,"sources":["select3.scss","select3.css"],"names":[],"mappings":"AAAA;EACI,sBAAA;EACA,cAAA;ACCJ;;ADCA;EACI,SAAA;EACA,UAAA;EACA,iCAAA;ACEJ;;ADAA;EACI,kBAAA;ACGJ;ADFI;EACI,YAAA;EACA,kBAAA;EACA,mBAAA;EACA,sBAAA;EAEA,eAAA;EACA,eAAA;EACA,kBAAA;ACGR;ADFQ;EACI,kBAAA;EACA,QAAA;EACA,UAAA;EACA,2BAAA;EACA,eAAA;ACIZ;ADDI;EACI,aAAA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,YAAA;EACA,kBAAA;EACA,sBAAA;EACA,mBAAA;EACA,iCAAA;EACA,gBAAA;EACA,+BAAA;ACGR;ADFQ;EACI,aAAA;EACA,sBAAA;EACA,WAAA;EACA,kBAAA;EACA,YAAA;EACA,aAAA;EACC,kBAAA;ACIb;ADDQ;EACI,kBAAA;EACA,iBAAA;EACA,YAAA;ACGZ;ADFY;EACI,UAAA;ACIhB;ADFY;EACI,6BAAA;EACA,0BAAA;ACIhB;ADFY;EACI,gBAAA;EACA,kBAAA;ACIhB;ADAY;EACI,WAAA;EACA,cAAA;EACA,aAAA;EACA,eAAA;EACA,6BAAA;EACA,gBAAA;ACEhB;ADDgB;EACI,sBAAA;ACGpB;ADDgB;EACI,yBAAA;EACA,WAAA;EACA,4BAAA;ACGpB;;ADKA;EACI;IACI,UAAA;ECFN;EDIE;IACI,UAAA;ECFN;AACF;ADKA;EACI;IACI,0BAAA;IACA,uCAAA;ECHN;EDKE;IACI,4BAAA;ECHN;EDKE;IACI,0BAAA;IACA,mCAAA;ECHN;AACF","file":"select3.css"}

88
wms/chengyanUI/select3.php
View File

@ -0,0 +1,88 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
</style>
<link rel="stylesheet" href="select3.css">
<div class="select3">
<div class="input">
<span>請選擇</span>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="select">
<input type="text" />
<div class="options">
</div>
</div>
</div>
<script>
const select3 =document.querySelector('.select3');
const inputArr = [{
value:'123',
name:'123',
check:false,
},
{
value:'456',
name:'456',
check:false,
},
{
value:'789',
name:'789',
check:false,
},
{
value:'111',
name:'111',
check:false,
},
{
value:'555',
name:'555',
check:false,
},
{
value:'989',
name:'989',
check:false,
},
{
value:'000',
name:'000',
check:false,
}];
const result = [];
const showSelect = (e)=>{
console.log(e.target);
if(e.target.parentNode.querySelector('.select').style.display == 'block'){
e.target.parentNode.querySelector('.select').style.display = "none"
}else{
e.target.parentNode.querySelector('.select').style.display = "block"
}
}
let html ="";
select3.querySelector('.input').addEventListener('click', showSelect)
inputArr.forEach(item=>{
html += `<label class="option">
<span>${item.name}</span>
</label>`
})
console.log(select3.querySelector('.options'));
const options = select3.querySelector('.options');
options.innerHTML = html;
for(let i=0;i<options.querySelectorAll('.option').length;i++){
options.querySelectorAll('.option')[i].addEventListener('click', checkFn)
}
function checkFn(e){
console.log(e.target);
e.target.classList.add('check')
}
</script>

110
wms/chengyanUI/select3.scss
View File

@ -0,0 +1,110 @@
body{
background-color: #aaa;
padding: 150px;
}
*{
margin:0;
padding: 0;
box-sizing: border-box !important;
}
.select3{
position: relative;
>.input {
width: 250px;
padding: 12px 15px;
border-radius: 10px;
background-color: #fff;
font-size: 13px;
cursor: pointer;
position: relative;
>i{
position: absolute;
top: 50%;
right:8px;
transform: translateY(-50%);
font-size: 12px;
}
}
>.select{
display: none;
position: absolute;
top: 44px;;
left:0;
width:250px;
padding: 16px 10px;
background-color: #fff;
border-radius: 10px;
box-sizing: border-box !important;
overflow: hidden;
animation: fadein .085s linear;
>input[type='text']{
outline: none;
border:1px #999 solid;
width: 100%;
border-radius: 4px;
height: 31px;
padding: 12px ;
margin-bottom: 3px;
}
>.options{
overflow-y: scroll;
max-height: 205px;
height:auto;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
background-size: 10px 10px;
}
&::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 5px;
}
>label{
width:100%;
display: block;
padding: 10px;
cursor: pointer;
border-bottom: 1px #ccc solid;
transition: .2s;
&:hover{
transform: scale(1.05);
}
&.check{
background-color:#5BC0DE;
color:#fff;
animation: check .1s linear;
}
}
}
}
}
@keyframes fadein {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes check {
0%{
transform: translateX(0px);
background-color:rgba(91, 192, 222,0);
}
0%{
transform: translateX(180px);
}
100%{
transform: translateX(0px);
background-color:rgba(91, 192, 222,1);
}
}

2
wms/cont/api/postElevatorPricereview.php
View File

@ -165,7 +165,7 @@ try{
VALUES (:apply_key, :item_no, :register_code, :elevator_brand, :elevator_kind, :spec, :weight, :speed, :stop, :floors, :persons, :elevator_num, :useful_years, :last_check_date, :speed_governors_check_expense, :maintain_times, :is_m1_bundle, :maintain_months, :maintain_period, :maintain_method, :stand_price, :contract_price, :sold_price, :commission_expense, :management_expense, :annual_survey_expense, :service_expense, :cmstatus, :updated_at, :creater, :created_at) "; VALUES (:apply_key, :item_no, :register_code, :elevator_brand, :elevator_kind, :spec, :weight, :speed, :stop, :floors, :persons, :elevator_num, :useful_years, :last_check_date, :speed_governors_check_expense, :maintain_times, :is_m1_bundle, :maintain_months, :maintain_period, :maintain_method, :stand_price, :contract_price, :sold_price, :commission_expense, :management_expense, :annual_survey_expense, :service_expense, :cmstatus, :updated_at, :creater, :created_at) ";
foreach($elevators as $elevator){ foreach($elevators as $elevator){
if(empty($elevator['permitNumber'])) $register_code = "A"; $register_code = (empty($elevator['permitNumber'])) ? "A" : $elevator['permitNumber'];
if($elevator['spec'] == "MAE100") $elevator_kind = "A"; if($elevator['spec'] == "MAE100") $elevator_kind = "A";
if($elevator['spec'] == "MAF100") $elevator_kind = "B"; if($elevator['spec'] == "MAF100") $elevator_kind = "B";

Write Preview
Loading…
Cancel
Save