自己前端確實(shí)不牢固，根本不會(huì)，基本就是無頭蒼蠅亂竄，遇到不會(huì)的就去搜了

vue? span標(biāo)簽中不識(shí)別空格的問題：

想使用空格站位達(dá)到效果，但是渲染的時(shí)候，空格就沒了

首先將span指定類

<style></style>里面在寫span這個(gè)類

圖片加載被攔截

使用基本的img src 被攔截沒法展現(xiàn)出來

一開始我是用el-button 里面塞背景圖片解決，但是確實(shí)很丑

解決：

使用<el-image style="width: 30px; height: 27px" :src="require('/ideaproject/訓(xùn)練項(xiàng)目/fishery/flash-vue-cockpit/public/2.png')" fit="fill" class="tempimg"></el-image>

解釋：

style：設(shè)置加載圖片的參數(shù)

src:圖片路徑，如果圖片在asset里面那么可以@/ 這種定位，我是從根路徑定位?

其他自行理解fill充滿，class 為el-imgae指定類，我這里css沒有對(duì)應(yīng)的不影響

然后用谷歌瀏覽器就可以展示了

input 輸入框的設(shè)置

<div>
?<input style="background:transparent;border:1px solid #ffffff" type="text" ?maxlength="11" ?placeholder="輸入點(diǎn)位關(guān)鍵詞"></input>
</div>

<style></style>里面加上：

input[type="text"],input[type="password"],input[type="email"]{

?-web-kit-appearance:none;
?-moz-appearance: none;
?outline:0;

?box-sizing: border-box;
?text-align:left;
?font-size:1.2em;
?height:2.1em;
?border-radius:5px;
?border:1px solid #c8cccf;
?color:white;;
?display:block;
?padding:0 1em;
?text-decoration:none;
?width:100%;
}
input::-webkit-input-placeholder{
?color: white;
}

el-collapse 箭頭位置的調(diào)整

變?yōu)椋?/p>

<el-collapse accordion v-model="activeNames" @change="handleChange" >
? ? ? ? ? ?<el-collapse-item name="1">
? ? ? ? ? ? ?<span class="collapse-title" slot="title">鄞州區(qū)</span>
<!-- ? ? ? ? ? ? ?到時(shí)候改成點(diǎn)擊事件-->
? ? ? ? ? ? ?<div>寧波松岙大埠1</div>
? ? ? ? ? ? ?<div>寧波松岙大埠2</div>
? ? ? ? ? ? ?<div>寧波松岙大埠3</div>
? ? ? ? ? ?</el-collapse-item>
? ? ? ? ? ?<el-collapse-item ?name="2">
? ? ? ? ? ? ?<span class="collapse-title" slot="title">海曙區(qū)</span>
? ? ? ? ? ? ?<div>海曙大埠1</div>
? ? ? ? ? ? ?<div>海曙大埠2</div>
? ? ? ? ? ?</el-collapse-item>
? ? ? ? ? ?<el-collapse-item ?name="3">
? ? ? ? ? ? ?<span class="collapse-title" slot="title">鎮(zhèn)海區(qū)</span>
? ? ? ? ? ? ?<div>鎮(zhèn)海大埠1</div>
? ? ? ? ? ? ?<div>鎮(zhèn)海大埠1</div>
? ? ? ? ? ?</el-collapse-item>
? ? ? ? ?</el-collapse>

<style>下面加上

::v-deep .collapse-title {
?flex: 1 0 90%;
?order: 1;

?.el-collapse-item__header {
? ?flex: 1 0 auto;
? ?order: -1;
?}
}

兩個(gè)el-card? 水平布局，在屏幕兩邊?

我是使用el-row ，el-col 來布局的

<el-row>
?<el-col :span="19">
? ?<el-card class="box-card">

????????<!--? ?你的代碼-->

????</el-card>

???<el-col>

????

<el-col?:span="5">
? ?<el-card?class="box-card">

????????<!--? ?你的代碼-->

????</el-card>

???<el-col>

<el-row>

一些解釋：

el-row 控制一行

el-col 控制列

屏幕一行分為24欄

也就是說我兩個(gè)：span? 里面的數(shù)字之和要等于24 ，那么這個(gè)數(shù)值可以調(diào)整到你的card符合你要求的時(shí)候，那么就是你中意的時(shí)候，或許12 12滿足了呢

我的是這樣的

el-image 左圖片右文字效果

代碼:

<div slot="header" class="clearfix" :style="background">
?<!-- ? ? ? ? ?style="border: none" align="center"-->
?<el-image style="width: 30px; height: 27px" :src="require('/ideaproject/訓(xùn)練項(xiàng)目/fishery/flash-vue-cockpit/public/6.png')" fit="fill" class="tempimg"></el-image>
?<span class="span"> ? ? ? ? ? ? ? ? ? 預(yù)警數(shù)統(tǒng)計(jì)</span>
</div>
<div slot="header" >
?<el-image style="width: 135px; height: 120px" :src="require('/ideaproject/訓(xùn)練項(xiàng)目/fishery/flash-vue-cockpit/public/1.png')" fit="fill" class="tupian"></el-image>
?<div class="wenzi_1">
? ?<span style="color: white;"> ? ?今日預(yù)警數(shù)</span>
?</div>
?<div class="wenzi_2">
? ?<span style="color: white;"> ? ?本月預(yù)警數(shù)</span>
?</div>
?<div class="wenzi_3">
? ?<span style="color: white;"> ? ? 累計(jì)預(yù)警數(shù)</span>
?</div>

</div>

.tupian{
?z-index:100;

}

.wenzi_1{
?position: absolute;
?left:1405px; //只是假定的值，具體需測量
?top:80px;
?z-index:101;
}
.wenzi_2{
?position: absolute;
?left:1405px; //只是假定的值，具體需測量
?top:100px;
?z-index:101;
}
.wenzi_3{
? position: absolute;
? left:1405px; //只是假定的值，具體需測量
? top:120px;
? z-index:101;
}

相關(guān)解釋：

z-index設(shè)置? 層級(jí)

z-index 越大說明越在上層

就像金字塔一樣

然后我的想法是每個(gè)文字都給個(gè)樣式，確實(shí)麻煩，后續(xù)如果有好的辦法在續(xù)寫

然后left是距離左邊屏幕的距離

top是距離頂部的距離

調(diào)整到自己想要的格式就行了

position:?absolute; 是絕對(duì)位置不管之前的設(shè)置直接以屏幕為準(zhǔn)

el=select? 下拉框樣式修改




<style ?lang="scss" ?scoped>
::v-deep .el-input__inner {
?padding: 0;
?background: transparent;
?color: #fff;
?//border: none;
?font-size: 18px;
}
::v-deep
?.el-select-dropdown{
?background-color:transparent;
}
?.select-popper {
?background-color:transparent;
?border-radius: 0.08rem;
?border: solid 0.02rem #1c395d;
?//font-family: PingFangSC-Regular;
?.el-select-dropdown__item{
? ?color: #FFFFFF;
? ?background: transparent;
?}
?.el-select-dropdown__item.selected {
? ?//font-family: PingFangSC-Regular;
? ?font-size: 0.28rem;
? ?color: rgba(74, 141, 253, 1);
?}
?li {
? ?color: #fff;
? ?background: transparent;
? ?color: #fff;
? ?font-size: 0.28rem;
?}
?.el-select-dropdown__item:hover,
?.el-select-dropdown__item.hover {
? ?background-color: rgba(110, 147, 206, 0.2);
? ?margin-right: 1px;
?}
?.popper__arrow::after {
? ?border-bottom-color: transparent;
?}
?.popper__arrow {
? ?border-bottom-color: transparent;
?}
?.el-select-dropdown__empty {
? ?padding: 0.2rem;
? ?font-size: 0.28rem;
?}
}
.select_shijian{
?//color: #FFFFFF;
?background: transparent;
?width: 260px;
?position: absolute;
?top: -10px;
?left: 0px;
?//right: 0px;

}
//.el-select-dropdown {
// ?background: rgba(8, 27, 69, 0.7) ;
// ?border-color:rgba(37, 175, 252, 1) ;
//}
//右側(cè)和下方的白邊
.el-scrollbar__wrap{
?margin-bottom: -20px !important;
?margin-right: -20px !important;
}




//數(shù)據(jù)返回

<script>




????????data(){


return{

cities:[{'value':'事件類型','label':'疑似船只'},{'value':'事件類型','label':'測試船只'},{'value':'事件類型','label':'確認(rèn)船只'}],

}

{




</script>

不再做解釋了，一些深度效果可以看渲染后的頁面源碼進(jìn)行更改

日歷選擇器

代碼：

<!-- ? ? ? ? ?日期范圍選擇-->
? ? ? ? ?<div class="block1">
? ? ? ? ? ?<el-date-picker v-model="startDate" type="daterange" range-separator=" 至 " start-placeholder="開始日期" end-placeholder="結(jié)束日期"
? ? ? ? ? ? ? ? ? ? ? ? ? ?style="background: transparent;position: absolute;top: 45px;width:260px;color: #FFFFFF" value-format="yyyy-MM-dd" @change="handleStartDateChange">
? ? ? ? ? ?</el-date-picker>
? ? ? ? ?</div>

css

.block1 {
?padding: 10px 0px;
?background: transparent;
?color: #FFFFFF;
}

js:

methods:

handleStartDateChange() {
?if (this.startDate && this.startDate.length > 0) {
? ?const timestampBegin = +new Date(this.startDate[0])
? ?const timestampEnd = +new Date(this.startDate[1])
? ?if (timestampEnd > timestampBegin + 3600 * 1000 * 24 * 10) {
? ? ?this.$alert('規(guī)定為日期的起止時(shí)間跨度不能超過10天', '提示', {
? ? ? ?confirmButtonText: '確定',
? ? ? ?type: 'warning'
? ? ?})
? ? ? ?.then(() => (this.startDate = null))
? ? ? ?.catch(() => (this.startDate = null))
? ?}
?}
},