|
|
@@ -51,6 +51,46 @@
|
|
|
<img src="@assets/topbg1.png" class="swiper-bg" alt="" />
|
|
|
</div>
|
|
|
|
|
|
+ <div class="short-list">
|
|
|
+ <div class="short-info" @click="$router.push('/starMap')">
|
|
|
+ <img src="@assets/home1.png" alt="" class="short-img" />
|
|
|
+ <div class="short-content">
|
|
|
+ <div class="add">
|
|
|
+ <img src="@assets/icon_jiahao.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="text1">链上星图</div>
|
|
|
+ <div class="text2">属于你的元宇宙物资铸造中心</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="short-info short-info2" @click="$router.push('/auction')">
|
|
|
+ <img src="@assets/home2.png" alt="" class="short-img" />
|
|
|
+ <div class="short-content">
|
|
|
+ <div class="text1">
|
|
|
+ <span>绿洲易拍</span>
|
|
|
+ <img src="@assets/icon_fanhui.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="short-info short-info2" @click="$router.push('/domainname')">
|
|
|
+ <img src="@assets/home3.png" alt="" class="short-img" />
|
|
|
+ <div class="short-content">
|
|
|
+ <div class="text1">
|
|
|
+ <span>元宇宙域名</span>
|
|
|
+ <img src="@assets/icon_fanhui.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="short-info short-info2" @click="$router.push('/hopeMarket')">
|
|
|
+ <img src="@assets/home4.png" alt="" class="short-img" />
|
|
|
+ <div class="short-content">
|
|
|
+ <div class="text1">
|
|
|
+ <span>元宇宙物资</span>
|
|
|
+ <img src="@assets/icon_fanhui.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="card news">
|
|
|
<div class="news-title" @click="$router.push('/newsList')">
|
|
|
<div class="news-left">
|
|
|
@@ -1014,4 +1054,80 @@ export default {
|
|
|
display: block;
|
|
|
z-index: 20;
|
|
|
}
|
|
|
+.short-list {
|
|
|
+ padding: 8px;
|
|
|
+ .short-info {
|
|
|
+ position: relative;
|
|
|
+ width: calc(50vw - 24px);
|
|
|
+ display: inline-block;
|
|
|
+ margin: 8px;
|
|
|
+
|
|
|
+ .short-img {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .short-content {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 2;
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+ .add {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ background: rgba(255, 255, 255, 0.18);
|
|
|
+ border-radius: 8px;
|
|
|
+ backdrop-filter: blur(4px);
|
|
|
+ .flex();
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 6px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: 10px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.short-info2 {
|
|
|
+ .short-content {
|
|
|
+ padding: 4px 12px;
|
|
|
+ background: rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 0px 0px 16px 16px;
|
|
|
+ backdrop-filter: blur(3px);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ .text1 {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
