<template> 
 | 
  <div id="title"> 
 | 
    <!--上--> 
 | 
    <div id="akuang"> 
 | 
      <!--左--> 
 | 
      <div class="xkuang"> 
 | 
        <div class="xian" style="margin-top: 10px"> 
 | 
          <p class="name">入库批次号:</p> 
 | 
          <div class="zhi">{{ InBatch }}</div> 
 | 
          <button class="gai" @click="updates(1)">编辑</button> 
 | 
        </div> 
 | 
        <div class="xian"> 
 | 
          <p class="name">出库批次号:</p> 
 | 
          <div class="zhi">{{ OutBatch }}</div> 
 | 
          <button class="gai" @click="updates(2)">编辑</button> 
 | 
        </div> 
 | 
        <div class="xian"> 
 | 
          <p class="name">出库类型:</p> 
 | 
          <div class="zhi"> 
 | 
            <input type="radio" name="a" id="a" />自产 
 | 
            <input type="radio" name="a" id="b" />外购 
 | 
          </div> 
 | 
          <button class="gai" @click="updates(3)">编辑</button> 
 | 
        </div> 
 | 
      </div> 
 | 
      <!--中--> 
 | 
      <div class="xkuang"> 
 | 
        <div class="xian" style="margin-top: 10px"> 
 | 
          <p class="name">入库类型:</p> 
 | 
          <div class="zhi"> 
 | 
            <input type="radio" name="c" id="e" />正常入库 
 | 
            <input type="radio" name="c" id="f" />直接出库 
 | 
          </div> 
 | 
          <button class="gai" @click="updates(5)">编辑</button> 
 | 
        </div> 
 | 
        <div class="xian"> 
 | 
          <p class="name">存放位置:</p> 
 | 
          <div class="zhi"> 
 | 
            <input type="radio" name="d" id="g" />快速出库 
 | 
            <input type="radio" name="d" id="h" />快速入库 
 | 
          </div> 
 | 
          <button class="gai" @click="updates(6)">编辑</button> 
 | 
        </div> 
 | 
        <div class="xian"> 
 | 
          <p class="name">是否出库:</p> 
 | 
          <div class="zhi"> 
 | 
            <input type="radio" name="b" id="c" />是 
 | 
            <input type="radio" name="b" id="d" />否 
 | 
          </div> 
 | 
          <button class="gai" @click="updates(4)">编辑</button> 
 | 
        </div> 
 | 
      </div> 
 | 
      <!--右--> 
 | 
      <div class="xkuang"> 
 | 
        <div class="xian" style="margin-top: 10px"> 
 | 
          <p class="names">上板数据记录:</p> 
 | 
          <div class="zhis">{{ data.R_CommonRecorder }}</div> 
 | 
        </div> 
 | 
        <div class="xian"> 
 | 
          <p class="names">剔除数据记录:</p> 
 | 
          <div class="zhis">{{ data.R_SpecialRecorder }}</div> 
 | 
        </div> 
 | 
        <div class="xian"> 
 | 
          <p class="names">极板总重量:</p> 
 | 
          <div class="zhis">{{ data.R_TotalWeight }}</div> 
 | 
        </div> 
 | 
      </div> 
 | 
    </div> 
 | 
    <!--下--> 
 | 
    <div id="bkuang" style="border-top: none"> 
 | 
      <div class="skuang"> 
 | 
        <div class="zhuname">天车</div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">天车当前运行模式:</div> 
 | 
          <div class="xzhi">{{ data.R_RunMode }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">天车当前运行状态:</div> 
 | 
          <div class="xzhi">{{ data.R_RunState }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">天车报警代码:</div> 
 | 
          <div class="xzhi">{{ data.R_AlarmCode }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">天车任务状态:</div> 
 | 
          <div class="xzhi">{{ data.R_TaskState }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">天车大车当前位置:</div> 
 | 
          <div class="xzhi">{{ data.R_CurrentLine }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">天车小车当前位置:</div> 
 | 
          <div class="xzhi">{{ data.R_CurrentColumn }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">起升当前位置:</div> 
 | 
          <div class="xzhi">{{ data.R_RiseUp_Position }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">任务号:</div> 
 | 
          <div class="xzhi">{{ data.R_TaskNumber }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">1号货爪是否有货:</div> 
 | 
          <div class="xzhi">{{ data.R_Loaded_1 }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">2号货爪是否有货:</div> 
 | 
          <div class="xzhi">{{ data.R_Loaded_2 }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">重量:</div> 
 | 
          <div class="xzhi">{{ data.weight }}</div> 
 | 
        </div> 
 | 
      </div> 
 | 
      <div class="skuang"> 
 | 
        <div class="zhuname">规整机</div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">规整机投入使用:</div> 
 | 
          <div class="xzhi">{{ data.R_GZJ_isWork }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">上料模式轨道车:</div> 
 | 
          <div class="xzhi">{{ data.R_RGVMode }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">上料模式叉车:</div> 
 | 
          <div class="xzhi">{{ data.R_CCMode }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">东跨架子可取板:</div> 
 | 
          <div class="xzhi">{{ data.R_DK_isready }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">西跨架子可取板:</div> 
 | 
          <div class="xzhi">{{ data.R_XK_isready }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">剔除架子可放板:</div> 
 | 
          <div class="xzhi">{{ data.R_TC_isready }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">剔除上料模式:</div> 
 | 
          <div class="xzhi">{{ data.R_TCMode }}</div> 
 | 
        </div> 
 | 
      </div> 
 | 
      <div class="skuang"> 
 | 
        <div class="zhuname">整形机</div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">整形机投入使用:</div> 
 | 
          <div class="xzhi">{{ data.R_ZXJ_isWork }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">上料模式轨道车:</div> 
 | 
          <div class="xzhi">{{ data.R_ZXJ_RGVMode }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">上料模式行车:</div> 
 | 
          <div class="xzhi">{{ data.R_ZXJ_TCMode }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">剔除位可取板:</div> 
 | 
          <div class="xzhi">{{ data.R_ZXJ_TC_isready }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">剔除模式行车:</div> 
 | 
          <div class="xzhi">{{ data.R_TCMode_TC }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">剔除模式叉车:</div> 
 | 
          <div class="xzhi">{{ data.R_TCMode_CC }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">行车可准备取板:</div> 
 | 
          <div class="xzhi">{{ data.R_HC_isReady }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">行车可放板:</div> 
 | 
          <div class="xzhi">{{ data.R_HC_isReadyWork }}</div> 
 | 
        </div> 
 | 
        <div class="zhankuang"> 
 | 
          <div class="xname">进料小车安全位:</div> 
 | 
          <div class="xzhi">{{ data.R_issafe }}</div> 
 | 
        </div> 
 | 
      </div> 
 | 
    </div> 
 | 
    <div id="ti"> 
 | 
      <div id="guan" @click="guanbi">X</div> 
 | 
      <div class="dakuang" v-if="xuan == 1"> 
 | 
        <input type="text" id="shu1" /> 
 | 
      </div> 
 | 
      <div class="dakuang" v-if="xuan == 2"> 
 | 
        <input type="text" id="shu2" /> 
 | 
      </div> 
 | 
      <div class="dakuang" v-if="xuan == 3"> 
 | 
        <input type="radio" name="aa" id="aa" class="ding" /> 
 | 
        <div class="yan">自产</div> 
 | 
        <input type="radio" name="aa" id="bb" class="ding" style="margin-left: 40px;" /> 
 | 
        <div class="yan">外购</div> 
 | 
      </div> 
 | 
      <div class="dakuang" v-if="xuan == 4"> 
 | 
        <input type="radio" name="bb" id="cc" class="ding" /> 
 | 
        <div class="yan">是</div> 
 | 
        <input type="radio" name="bb" id="dd" class="ding" style="margin-left: 40px;" /> 
 | 
        <div class="yan">否</div> 
 | 
      </div> 
 | 
      <div class="dakuang" v-if="xuan == 5" style="margin-left: -100px;width:300px"> 
 | 
        <input type="radio" name="cc" id="ee" class="ding" /> 
 | 
        <div class="yan">正常入库</div> 
 | 
        <input type="radio" name="cc" id="ff" class="ding" style="margin-left: 40px;" /> 
 | 
        <div class="yan">直接出库</div> 
 | 
      </div> 
 | 
      <div class="dakuang" v-if="xuan == 6" style="margin-left: -100px;width:300px"> 
 | 
        <input type="radio" name="cc" id="gg" class="ding" /> 
 | 
        <div class="yan">快速入库</div> 
 | 
        <input type="radio" name="cc" id="hh" class="ding" style="margin-left: 40px;" /> 
 | 
        <div class="yan">快速出库</div> 
 | 
      </div> 
 | 
      <div id="xiugai" @click="xiugai()">修改</div> 
 | 
    </div> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import { ref, reactive, nextTick, computed, watch } from "vue"; 
 | 
import { useStore } from "vuex"; 
 | 
import { onMounted } from "vue"; 
 | 
import axios from "axios"; 
 | 
  
 | 
export default { 
 | 
  data() { 
 | 
    return { 
 | 
      xuan: 0 
 | 
    }; 
 | 
  }, 
 | 
  methods: { 
 | 
    updates(x) { 
 | 
      if (x == 1) { 
 | 
        document.getElementById("ti").style.display = "block"; 
 | 
        this.xuan = 1; 
 | 
      } else if (x == 2) { 
 | 
        document.getElementById("ti").style.display = "block"; 
 | 
        this.xuan = 2; 
 | 
      } else if (x == 3) { 
 | 
        document.getElementById("ti").style.display = "block"; 
 | 
        this.xuan = 3; 
 | 
      } else if (x == 4) { 
 | 
        document.getElementById("ti").style.display = "block"; 
 | 
        this.xuan = 4; 
 | 
      } else if (x == 5) { 
 | 
        document.getElementById("ti").style.display = "block"; 
 | 
        this.xuan = 5; 
 | 
      } else if (x == 6) { 
 | 
        document.getElementById("ti").style.display = "block"; 
 | 
        this.xuan = 6; 
 | 
      } 
 | 
    }, 
 | 
    xiugai() { 
 | 
      if (this.xuan == 1) { 
 | 
        let w = document.getElementById("shu1").value; 
 | 
        let http = "api/Batch/UpdateInBatch/?batch=" + w; 
 | 
        let s = {}; 
 | 
        if (w == "" || w == null) { 
 | 
          alert("请输入"); 
 | 
        } else { 
 | 
          this.gai(http, s); 
 | 
        } 
 | 
      } else if (this.xuan == 2) { 
 | 
        let w = document.getElementById("shu2").value; 
 | 
        let http = "api/Batch/UpdateOutBatch/?batch=" + w; 
 | 
        let s = {}; 
 | 
        if (w == "" || w == null) { 
 | 
          alert("请输入"); 
 | 
        } else { 
 | 
          this.gai(http, s); 
 | 
        } 
 | 
      } else if (this.xuan == 3) { 
 | 
        let w = "api/Batch/UpdateOutStorageMode"; 
 | 
        let n = document.getElementById("aa").checked; 
 | 
        let m = document.getElementById("bb").checked; 
 | 
  
 | 
        if (n) { 
 | 
          let http = w + "?isout=0"; 
 | 
          let s = {}; 
 | 
          this.gai(http, s); 
 | 
        } else if (m) { 
 | 
          let http = w + "?isout=1"; 
 | 
          let s = {}; 
 | 
          this.gai(http, s); 
 | 
        } else { 
 | 
          alert("请选择"); 
 | 
        } 
 | 
      } else if (this.xuan == 4) { 
 | 
        let w = "api/OutStock/UpdateIsOutStock"; 
 | 
        let n = document.getElementById("cc").checked; 
 | 
        let m = document.getElementById("dd").checked; 
 | 
        if (n) { 
 | 
          let http = w + "?isout=1"; 
 | 
          let s = {}; 
 | 
          this.gai(http, s); 
 | 
        } else if (m) { 
 | 
          let http = w + "?isout=0"; 
 | 
          let s = {}; 
 | 
          this.gai(http, s); 
 | 
        } else { 
 | 
          alert("请选择"); 
 | 
        } 
 | 
      } else if (this.xuan == 5) { 
 | 
        let w = "api/OutStock/UpdateInOut"; 
 | 
        let n = document.getElementById("ee").checked; 
 | 
        let m = document.getElementById("ff").checked; 
 | 
        if (n) { 
 | 
          let http = w + "?isout=1"; 
 | 
          let s = {}; 
 | 
          this.gai(http, s); 
 | 
        } else if (m) { 
 | 
          let http = w + "?isout=2"; 
 | 
          let s = {}; 
 | 
          this.gai(http, s); 
 | 
        } else { 
 | 
          alert("请选择"); 
 | 
        } 
 | 
      } else if (this.xuan == 6) { 
 | 
        let w = "api/StorageMode/UpdateStoragemode/"; 
 | 
        let n = document.getElementById("gg").checked; 
 | 
        let m = document.getElementById("hh").checked; 
 | 
        if (n) { 
 | 
          let http = w + "?storagemode=2"; 
 | 
          let s = {}; 
 | 
          this.gai(http, s); 
 | 
        } else if (m) { 
 | 
          let http = w + "?storagemode=1"; 
 | 
          let s = {}; 
 | 
          this.gai(http, s); 
 | 
        } else { 
 | 
          alert("请选择"); 
 | 
        } 
 | 
      } 
 | 
    }, 
 | 
    gai(http, s) { 
 | 
      axios.post(http, s).then(x => { 
 | 
        document.getElementById("ti").style.display = "none"; 
 | 
        alert("修改成功"); 
 | 
      }); 
 | 
    }, 
 | 
    guanbi() { 
 | 
      document.getElementById("ti").style.display = "none"; 
 | 
    } 
 | 
  }, 
 | 
  setup() { 
 | 
    const store = useStore(); 
 | 
    const data = ref({}); 
 | 
  
 | 
    const InBatch = ref(); 
 | 
    const OutBatch = ref(); 
 | 
  
 | 
    const cha = () => { 
 | 
      axios.post("api/Batch/getPageData", { rows: 30 }).then(x => { 
 | 
        InBatch.value = x.data.rows[0].inBatch; 
 | 
        OutBatch.value = x.data.rows[0].outBatch; 
 | 
        if (x.data.rows[0].materType == 0) { 
 | 
          document.getElementById("a").checked = true; 
 | 
        } else if (x.data.rows[0].materType == 1) { 
 | 
          document.getElementById("b").checked = true; 
 | 
        } 
 | 
      }); 
 | 
      axios.post("api/OutStock/getPageData", { rows: 30 }).then(x => { 
 | 
        if (x.data.rows[0].isout == 1) { 
 | 
          document.getElementById("c").checked = true; 
 | 
        } else if (x.data.rows[0].isout == 0) { 
 | 
          document.getElementById("d").checked = true; 
 | 
        } 
 | 
  
 | 
        if (x.data.rows[0].inOut == 1) { 
 | 
          document.getElementById("e").checked = true; 
 | 
        } else if (x.data.rows[0].inOut == 2) { 
 | 
          document.getElementById("f").checked = true; 
 | 
        } 
 | 
      }); 
 | 
      axios.post("api/StorageMode/getPageData", { rows: 30 }).then(x => { 
 | 
        if (x.data.rows[0].storagemode == 1) { 
 | 
          document.getElementById("g").checked = true; 
 | 
        } else if (x.data.rows[0].storagemode == 2) { 
 | 
          document.getElementById("h").checked = true; 
 | 
        } 
 | 
      }); 
 | 
    }; 
 | 
  
 | 
    onMounted(() => { 
 | 
      nextTick(() => { 
 | 
        setInterval(() => { 
 | 
          data.value = store.state.homedata; 
 | 
          cha(); 
 | 
          let xian = document.getElementsByClassName("xzhi"); 
 | 
          for (let i = 0; i < xian.length; i++) { 
 | 
            if (xian[i].innerHTML == "true") { 
 | 
              xian[i].style.color = "green"; 
 | 
            } else if (xian[i].innerHTML == "false") { 
 | 
              xian[i].style.color = "red"; 
 | 
            } 
 | 
          } 
 | 
        }, 3000); 
 | 
      }); 
 | 
    }); 
 | 
    return { 
 | 
      data, 
 | 
      InBatch, 
 | 
      OutBatch 
 | 
    }; 
 | 
  } 
 | 
}; 
 | 
</script> 
 | 
  
 | 
<style scoped> 
 | 
.zhis { 
 | 
  width: 45%; 
 | 
  height: 5vh; 
 | 
  float: left; 
 | 
  margin-top: 10px; 
 | 
  margin-left: -10%; 
 | 
  line-height: 60px; 
 | 
  text-align: center; 
 | 
  font-size: 1.1cqw; 
 | 
  color: white; 
 | 
} 
 | 
.names { 
 | 
  width: 28%; 
 | 
  height: 5vh; 
 | 
  float: left; 
 | 
  margin-top: 10px; 
 | 
  margin-left: 20%; 
 | 
  line-height: 60px; 
 | 
  text-align: right; 
 | 
  font-size: 1.1cqw; 
 | 
  color: white; 
 | 
} 
 | 
.ding { 
 | 
  float: left; 
 | 
  width: 20px; 
 | 
  height: 20px; 
 | 
  margin-top: 7px; 
 | 
} 
 | 
.yan { 
 | 
  color: white; 
 | 
  float: left; 
 | 
  font-size: 25px; 
 | 
} 
 | 
.dakuang { 
 | 
  width: 250px; 
 | 
  height: 50px; 
 | 
  position: absolute; 
 | 
  top: 150px; 
 | 
  left: 200px; 
 | 
} 
 | 
#xiugai { 
 | 
  width: 100px; 
 | 
  height: 30px; 
 | 
  float: left; 
 | 
  border-radius: 5px; 
 | 
  text-align: center; 
 | 
  line-height: 30px; 
 | 
  cursor: pointer; 
 | 
  border: 1px solid white; 
 | 
  color: white; 
 | 
  background: rgba(255, 255, 255, 0.5); 
 | 
  font-size: 25px; 
 | 
  position: absolute; 
 | 
  top: 150px; 
 | 
  left: 450px; 
 | 
} 
 | 
#xiugai:hover { 
 | 
  background: #f60; 
 | 
} 
 | 
#shu1, 
 | 
#shu2 { 
 | 
  width: 200px; 
 | 
  height: 30px; 
 | 
  float: left; 
 | 
  margin-top: 0px; 
 | 
  margin-right: 0px; 
 | 
  border-radius: 5px; 
 | 
  border: 1px solid white; 
 | 
} 
 | 
#guan { 
 | 
  width: 40px; 
 | 
  height: 40px; 
 | 
  float: left; 
 | 
  font-size: 1.1cqw; 
 | 
  text-align: center; 
 | 
  line-height: 40px; 
 | 
  cursor: pointer; 
 | 
  margin-left: 560px; 
 | 
  color: white; 
 | 
  position: absolute; 
 | 
} 
 | 
#ti { 
 | 
  width: 600px; 
 | 
  height: 300px; 
 | 
  position: relative; 
 | 
  background: rgba(255, 255, 255, 1); 
 | 
  border-radius: 10px; 
 | 
  top: 230px; 
 | 
  left: 35%; 
 | 
  display: none; 
 | 
  background-image: url("../img/1.png"); 
 | 
  background-repeat: no-repeat; 
 | 
  background-size: 170%; 
 | 
  background-position: -220px 0px; 
 | 
} 
 | 
.zhuname { 
 | 
  width: 100%; 
 | 
  height: 5vh; 
 | 
  float: left; 
 | 
  text-align: center; 
 | 
  line-height: 50px; 
 | 
  font-weight: 700; 
 | 
  font-size: 1.1cqw; 
 | 
  color: white; 
 | 
} 
 | 
.xname { 
 | 
  width: 70%; 
 | 
  height: 80px; 
 | 
  float: left; 
 | 
  line-height: 7vh; 
 | 
  font-size: 1.1cqw; 
 | 
  color: white; 
 | 
} 
 | 
.xzhi { 
 | 
  width: 30%; 
 | 
  height: 7vh; 
 | 
  float: left; 
 | 
  line-height: 65px; 
 | 
  font-size: 1.1cqw; 
 | 
  color: white; 
 | 
} 
 | 
.zhankuang { 
 | 
  width: 45%; 
 | 
  height: 7vh; 
 | 
  margin-top: 10px; 
 | 
  margin-left: 5%; 
 | 
  float: left; 
 | 
} 
 | 
.gai { 
 | 
  width: 15%; 
 | 
  height: 3vh; 
 | 
  float: left; 
 | 
  border-radius: 10px; 
 | 
  cursor: pointer; 
 | 
  margin-top: 22px; 
 | 
  margin-left: 1%; 
 | 
  font-size: 1.1cqw; 
 | 
} 
 | 
.gai:hover { 
 | 
  background-color: #f60; 
 | 
  color: white; 
 | 
} 
 | 
.zhi { 
 | 
  width: 45%; 
 | 
  height: 5vh; 
 | 
  float: left; 
 | 
  margin-top: 10px; 
 | 
  margin-left: 1%; 
 | 
  line-height: 60px; 
 | 
  text-align: center; 
 | 
  font-size: 1.1cqw; 
 | 
  color: white; 
 | 
} 
 | 
.name { 
 | 
  width: 28%; 
 | 
  height: 5vh; 
 | 
  float: left; 
 | 
  margin-top: 10px; 
 | 
  margin-left: 1%; 
 | 
  line-height: 60px; 
 | 
  text-align: right; 
 | 
  font-size: 1.1cqw; 
 | 
  color: white; 
 | 
} 
 | 
.xian { 
 | 
  width: 100%; 
 | 
  height: 9vh; 
 | 
  float: left; 
 | 
} 
 | 
#title { 
 | 
  float: left; 
 | 
  width: 95%; 
 | 
  height: 88vh; 
 | 
  margin-top: 40px; 
 | 
  margin-left: 3%; 
 | 
  background-image: url("../img/1.png"); 
 | 
  background-repeat: no-repeat; 
 | 
  background-size: 100%; 
 | 
  container-type: inline-size; 
 | 
} 
 | 
#akuang { 
 | 
  width: 100%; 
 | 
  height: 33vh; 
 | 
  float: left; 
 | 
} 
 | 
#bkuang { 
 | 
  width: 100%; 
 | 
  height: 55vh; 
 | 
  float: left; 
 | 
} 
 | 
.xkuang { 
 | 
  float: left; 
 | 
  width: 31%; 
 | 
  height: 28vh; 
 | 
  border-top: none; 
 | 
  border-left: none; 
 | 
  border-bottom: none; 
 | 
  background: rgba(255, 255, 255, 0.2); 
 | 
  margin-left: 1.7%; 
 | 
  margin-top: 20px; 
 | 
  border-radius: 10px; 
 | 
} 
 | 
.skuang { 
 | 
  width: 31%; 
 | 
  height: 55vh; 
 | 
  float: left; 
 | 
  border-top: none; 
 | 
  border-left: none; 
 | 
  border-bottom: none; 
 | 
  background: rgba(255, 255, 255, 0.2); 
 | 
  margin-left: 1.7%; 
 | 
  border-radius: 10px; 
 | 
} 
 | 
</style> 
 |