|
@@ -5,17 +5,30 @@
|
|
|
<span>飞鸟智慧巡园平台</span>
|
|
|
<img src="@/assets/images/common/logo-icon.png" alt="" />
|
|
|
</div>
|
|
|
- <div class="date">
|
|
|
- <div>111</div>
|
|
|
+ <div class="date" v-show="showDate">
|
|
|
+ <el-icon size="25"><MoreFilled /></el-icon>
|
|
|
<div class="time">
|
|
|
<div>21:05:46</div>
|
|
|
<span>2024.11.04 星期一</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 四个方向的阴影 -->
|
|
|
+ <div class="page-shadow">
|
|
|
+ <div class="page-bg bg-top"></div>
|
|
|
+ <div class="page-bg bg-right"></div>
|
|
|
+ <div class="page-bg bg-bottom"></div>
|
|
|
+ <div class="page-bg bg-left"></div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+const props = defineProps({
|
|
|
+ showDate:{
|
|
|
+ type:Boolean,
|
|
|
+ defalut:false
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -24,9 +37,9 @@
|
|
|
height: 74px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- background: #101010;
|
|
|
box-sizing: border-box;
|
|
|
pointer-events: all;
|
|
|
+ position: relative;
|
|
|
|
|
|
.title {
|
|
|
width: 100%;
|
|
@@ -46,7 +59,51 @@
|
|
|
.date {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- width: 180px;
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ top: 24px;
|
|
|
+ .time{
|
|
|
+ margin-left: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ div{
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ letter-spacing: 1px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size: 11px;
|
|
|
+ font-family: 'SOURCEHANTIFINE';
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+// 阴影样式
|
|
|
+.page-bg{
|
|
|
+ position: fixed;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+.bg-top{
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ background: linear-gradient( 0deg, rgba(0, 21, 31,0), #00151f);
|
|
|
+}
|
|
|
+.bg-right{
|
|
|
+ right: 0;
|
|
|
+ width: 600px;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient( 90deg, rgba(0, 21, 31,0), rgb(0, 21, 31,0.7));
|
|
|
+}
|
|
|
+.bg-bottom{
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ background: linear-gradient( 180deg, rgba(0, 21, 31,0), rgb(0, 21, 31,0.7));
|
|
|
+}
|
|
|
+.bg-left{
|
|
|
+ left: 0;
|
|
|
+ width: 600px;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient( 270deg, rgba(0, 21, 31,0), rgb(0, 21, 31,0.7));
|
|
|
+}
|
|
|
</style>
|