From 04a2d3e3c701a03981c4b66162ff9515f9d7dd12 Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期一, 21 四月 2025 22:32:21 +0800
Subject: [PATCH] 修改数据与页面逻辑
---
src/views/Home.vue | 293 ++++++++++++++++++++++++++++-----------------------------
1 files changed, 144 insertions(+), 149 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3f0d175..ca94ef1 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,7 +2,7 @@
<div class="w-full h-full relative">
<!-- 杞挱鍥鹃儴鍒� -->
<div class="banner-carousel relative w-screen h-[602px]">
- <el-carousel height="602px" :interval="3000" indicator-position="none" arrow="never">
+ <el-carousel height="602px" :interval="3000" indicator-position="" pause-on-hover>
<el-carousel-item>
<div class="carousel-item">
<img src="@/assets/carousel/home/1.png" class="carousel-image" />
@@ -30,14 +30,13 @@
<div class="bg-white py-8" v-if="false">
<div class="mx-auto px-32">
<div class="grid grid-cols-4 divide-x-w-default">
- <a @click="toSubsidy" class="block" style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3">
+ <a @click="toSubsidy" class="block"
+ style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3">
<div class="flex items-center gap-1 justify-center">
<div class="w-16 h-16">
<svg viewBox="0 0 24 24" class="w-full h-full">
- <path
- fill="currentColor"
- d="M14,17H7V15H14V17M17,13H7V11H17V13M17,9H7V7H17V9M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z"
- />
+ <path fill="currentColor"
+ d="M14,17H7V15H14V17M17,13H7V11H17V13M17,9H7V7H17V9M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z" />
</svg>
</div>
<div>
@@ -50,10 +49,8 @@
<div class="flex items-center gap-1 justify-center">
<div class="w-16 h-16">
<svg viewBox="0 0 24 24" class="w-full h-full">
- <path
- fill="currentColor"
- d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z"
- />
+ <path fill="currentColor"
+ d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" />
</svg>
</div>
<div>
@@ -66,10 +63,8 @@
<div class="flex items-center gap-1 justify-center">
<div class="w-16 h-16">
<svg viewBox="0 0 24 24" class="w-full h-full">
- <path
- fill="currentColor"
- d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
- />
+ <path fill="currentColor"
+ d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</div>
<div>
@@ -95,48 +90,38 @@
<!-- 涓诲唴瀹瑰尯鍩� -->
<div class="bg-white flex flex-col gap-8 relative" style="width: calc(100% - 434px)">
<!-- 浜у搧鍖哄煙 -->
- <div class="bg-[#F0F3EF] w-full">
+ <div class="bg-[#F0F3EF] w-full relative">
<div class="catalog-list bg-[#fff] grid grid-cols-5 gap-4 justify-center items-center">
- <div
- :class="state.curSelectCatalog === item.tag ? 'catalog-tag-active' : ''"
- class="catalog-item"
- v-for="item in state.catalog"
- :key="item.tag"
- @click="changeCatalog(item.tag)"
- >
+ <div :class="state.curSelectCatalog === item.tag ? 'catalog-tag-active' : ''"
+ class="catalog-item" v-for="item in state.catalog" :key="item.tag"
+ @click="changeCatalog(item.tag)">
{{ item.name }}
</div>
</div>
<!-- 鎴戦渶瑕佽缃畇wiper鐨勯粯璁ゆ樉绀虹殑slide -->
- <swiper
- :direction="'vertical'"
- @swiper="onSwiper"
- @slideChange="onSlideChange"
- :slidesPerView="state.catalogSwiperIndex"
- :centeredSlides="true"
- :autoplay="{
+ <swiper :direction="'vertical'" @swiper="onSwiper" @slideChange="onSlideChange"
+ :slidesPerView="state.catalogSwiperIndex" :centeredSlides="true" :autoplay="{
delay: 1000000,
disableOnInteraction: false,
pauseOnMouseEnter: true,
- }"
- :effect="'fade'"
- :modules="SwiperModule"
- class="catalog-swiper w-full h-[1175px]"
- >
+ }" :effect="'fade'" :modules="SwiperModule" class="catalog-swiper w-full h-[765px]">
<swiper-slide class="w-full h-full" v-for="(item, index) in state.catalogItemList" :key="index">
<div class="catalog-continer overflow-hidden">
- <div class="catalog-continer-item p-4 relative" v-for="child in item" :key="child.Id" @click="handleCatalogClick(child)">
+ <div class="catalog-continer-item p-4 relative" v-for="child in item" :key="child.Id"
+ @click="handleSeriesClick(child)">
<div class="w-full h-[250px]">
- <img class="w-full h-full object-contain" :src="child.PhysicalPicturePath" alt="" />
+ <img class="w-full h-full object-contain" :src="child.PhysicalPicturePath"
+ alt="" />
</div>
<div class="mt-4 text-center font-medium" style="font-size: 18px">
{{ child.Model }}
</div>
- <div class="text-center font-medium text-[14px] bg-[#fff] text-[#003a8f] absolute top-[10px] right-[-13px]" style="font-weight: bold">
+ <div class="text-center font-medium text-[14px] bg-[#fff] text-[#003a8f] absolute top-[10px] right-[-13px]"
+ style="font-weight: bold">
<!-- {{ getCompanyNameByType(child.Type) }} -->
<div class="etiquet-price">
- <p>{{ getCompanyNameByType(child.Type) }}</p>
+ <p>{{ child.CompanyName }}</p>
<div></div>
</div>
</div>
@@ -144,6 +129,9 @@
</div>
</swiper-slide>
</swiper>
+ <div class="text-center text-[18px] text-[#5c5c5c] more-series-btn" @click="handleCatalogClick">
+ 鏇村>>
+ </div>
</div>
<!-- 鏂伴椈鍏憡鍖哄煙 -->
<div class="w-full mb-4">
@@ -158,12 +146,8 @@
<!-- 宸︿晶鏂伴椈妯℃澘 -->
<div class="w-[373px] flex flex-col gap-4">
<div class="w-full relative left-news-temp-div">
- <img
- class="w-full flex-0 cursor-pointer"
- src="@/assets/home/notice1.png"
- @click="routeClick('/news-detail/8')"
- alt="鏂伴椈鏀跨瓥"
- />
+ <img class="w-full flex-0 cursor-pointer" src="@/assets/home/notice1.png"
+ @click="routeClick('/news-detail/8')" alt="鏂伴椈鏀跨瓥" />
</div>
<span class="news-title">
銆婁笂娴峰競缁忔祹淇℃伅鍖栧鍏充簬寮�灞�2025骞村害涓婃捣甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佽祫閲戦」鐩敵鎶ュ伐浣滅殑閫氱煡銆�
@@ -172,32 +156,29 @@
<div class="flex-auto right-news-temp-div">
<div class="w-full h-[45px] flex justify-between items-center">
<div class="w-[20%] font-bold text-[20px]">鏂伴椈鏀跨瓥</div>
- <div class="w-[80%] text-right pr-[10%] text-[18px] text-[#5c5c5c]">鏇村>></div>
+ <div class="w-[80%] text-right pr-[30px] text-[18px] text-[#5c5c5c]">鏇村>></div>
</div>
<div class="w-full flex justify-between gap-8" style="height: calc(100% - 45px)">
<div class="w-[422px] flex-shrink-0">
<img src="@/assets/home/news_1.jpg" alt="鏂伴椈鏀跨瓥" class="w-full h-[187px]" />
- <div
- class="line-clamp-3 font-bold text-large mb-2 hover:text-primary cursor-pointer text-[20px] text-[#000]"
- @click="routeClick('/news-detail/8')"
- >
+ <div class="line-clamp-3 font-bold text-large mb-2 hover:text-primary cursor-pointer text-[20px] text-[#000]"
+ @click="routeClick('/news-detail/8')">
涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡紑灞�2025骞村害涓婃捣甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佽祫閲戦」鐩敵鎶ュ伐浣滅殑閫氱煡
</div>
- <div
- class="text-regular text-[16px] text-[#656565] line-height-[29px] line-clamp-4 new-desc-text overflow-hidden"
- style="text-indent: 2rem"
- >
+ <div class="text-regular text-[16px] text-[#656565] line-height-[29px] line-clamp-4 new-desc-text overflow-hidden"
+ style="text-indent: 2rem">
鏈夊叧鍗曚綅锛�
涓鸿疮褰昏惤瀹炪�婁笂娴峰競鑺傝兘鍑忔帓锛堝簲瀵规皵鍊欏彉鍖栵級涓撻」璧勯噾绠＄悊鍔炴硶锛堟勃鍙戞敼瑙勮寖銆�2021銆�5鍙凤級銆嬪拰銆婁笂娴峰競宸ヤ笟閫氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佸疄鏂界粏鍒欍�嬶紙娌粡淇¤鑼冦��2025銆�1鍙凤級锛岃繘涓�姝ユ帹杩涙湰甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂板伐浣滐紝鐜扮粍缁囧紑灞�2025骞村害涓婃捣甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佽祫閲戦」鐩敵鎶ュ伐浣溿��
</div>
</div>
<div class="mt-4">
- <div v-for="(item, index) in newsList" :key="index" class="flex text-regular justify-between items-center news-item">
- <div class="flex items-center hover:text-primary w-full" @click="handleNewsClick(item)">
+ <div v-for="(item, index) in newsList" :key="index"
+ class="flex text-regular justify-between items-center news-item">
+ <div class="flex items-center hover:text-primary w-full"
+ @click="handleNewsClick(item)">
<div class="w-[6px] h-[6px] mr-2 news-list-dot"></div>
<div
- class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
- >
+ class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap">
{{ item.title }}
</div>
</div>
@@ -222,27 +203,25 @@
<div id="eec-product-map" ref="EecProductMapChartRef"></div>
</div>
<div class="h-fit my-auto px-4 py-4 mx-10 eec-product-num-div">
- <div class="h-full bg-[#393939] px-4 py-4 flex-1" style="box-sizing: border-box; background-color: rgb(0 0 0 / 67%)">
+ <div class="h-full bg-[#393939] px-4 py-4 flex-1"
+ style="box-sizing: border-box; background-color: rgb(0 0 0 / 67%)">
<div class="flex flex-col justify-between items-center mb-4 gap-2">
<div class="text-lg font-bold text-[#26c4f6]">鍏ㄥ浗鑳芥晥浜у搧鎬婚噺</div>
- <div class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
- {{ m_allEecProductNumber }}<span class="text-base text-info-light-3 ml-1">涓�</span>
+ <div
+ class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
+ {{ m_allEecProductNumber }}<span
+ class="text-base text-info-light-3 ml-1">涓�</span>
</div>
</div>
<div class="grid grid-cols-1 gap-4 h-[140px]">
- <swiper
- :direction="'vertical'"
- :slidesPerView="5"
- :spaceBetween="10"
- :autoplay="{
- delay: 1500,
- disableOnInteraction: false,
- }"
- :modules="SwiperModule"
- class="mySwiper"
- >
- <swiper-slide v-for="(item, index) in cooperationData" :key="index" style="width: 100%; height: 20px">
- <div style="height: 100%; width: 100%; display: flex; gap: 4px; justify-content: center">
+ <swiper :direction="'vertical'" :slidesPerView="5" :spaceBetween="10" :autoplay="{
+ delay: 1500,
+ disableOnInteraction: false,
+ }" :modules="SwiperModule" class="mySwiper">
+ <swiper-slide v-for="(item, index) in cooperationData" :key="index"
+ style="width: 100%; height: 20px">
+ <div
+ style="height: 100%; width: 100%; display: flex; gap: 4px; justify-content: center">
<span class="text-[#26c4f6]">{{ item.region }}</span>
<div>
<span class="text-white font-bold">{{ item.count }}</span>
@@ -274,19 +253,14 @@
</div>
</div>
<!-- 杩斿洖椤堕儴 -->
- <div
- id="scroll-to-top"
+ <div id="scroll-to-top"
class="group absolute bottom-[100px] z-[30] right-[100px] transition-all duration-300 cursor-pointer"
:class="{
'opacity-0 translate-y-4 fade-leave-active': scrollPercent < 35,
'opacity-100 translate-y-0 fade-enter-active': scrollPercent >= 35,
- }"
- v-show="scrollPercent >= 35"
- @click="scrollToTop"
- >
+ }" v-show="scrollPercent >= 35" @click="scrollToTop">
<div
- class="w-14 h-14 flex items-center justify-center flex-col cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
- >
+ class="w-14 h-14 flex items-center justify-center flex-col cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200">
<img src="@/assets/home/Totop.jpg" alt="杩斿洖椤堕儴" class="" />
</div>
</div>
@@ -295,9 +269,7 @@
<!-- 瀹㈡湇瀵硅瘽妗� -->
<customer-service
class="fixed right-[150px] bottom-[17px] z-50 w-[440px] h-[calc(80vh-30px)] shadow-lg rounded-lg"
- v-show="showCustomerService"
- @close="showCustomerService = false"
- />
+ v-show="showCustomerService" @close="showCustomerService = false" />
</div>
</template>
@@ -406,7 +378,7 @@
curSelectCatalog: 1,
catalogSwiperIndex: 0,
catalogItemList: [],
- m_CompanyList:[],
+ m_CompanyList: [],
m_PageLoading: false,
});
@@ -604,25 +576,6 @@
let scrollToTop = document.getElementById('scroll-to-top');
let footer = document.getElementById('app-footer');
-
- // if (footer) {
- // const footerRect = footer.getBoundingClientRect();
- // const viewportHeight = window.innerHeight;
-
- // if (footerRect.top > viewportHeight) {
- // // Footer is not in viewport
- // if (scrollToTop) {
- // scrollToTop.style.bottom = '100px';
- // }
- // } else {
- // // Footer is in viewport
- // if (scrollToTop) {
- // const distanceFromFooter = 100; // 100px gap from footer
- // const newBottom = viewportHeight - footerRect.top + distanceFromFooter;
- // scrollToTop.style.bottom = `${newBottom}px`;
- // }
- // }
- // }
};
const linkClick = () => {
router.push('/select-selpara');
@@ -656,7 +609,7 @@
};
});
})
- .catch((err) => {});
+ .catch((err) => { });
};
// 鍒濆鍖栫被鍨嬪垪琛ㄦ暟鎹�
const initCatalogList = (cb: any = null) => {
@@ -667,40 +620,32 @@
url: m_RequestDataObj[catalogTag].requestPath,
})
.then((res) => {
+
state.m_PageLoading = false;
let result = res.data;
-
+ const { SeriesList } = result
let arr = [];
// arr涓轰簩浣嶆暟缁勶紝姣忎釜瀛愭暟缁勫寘鍚�15鏉℃暟鎹�
-
- result = result.map((item: any, index: number) => {
- if (catalogTag === 2) {
- item.Price = item.Price * 10;
- }
- if (catalogTag === 4) {
- item.Price = item.Price * 5;
- }
- let incrementFactor = 0.1 * (index + 1); // 鏍规嵁绱㈠紩璁＄畻閫掑绯绘暟
- let newPrice = parseFloat(item.Price) + parseFloat((item.Price * incrementFactor).toFixed(1)); // 璁＄畻鏂扮殑Price鍊�
-
+ const pageSeriesList = SeriesList.map((item: any, index: number) => {
return {
Id: item.Id,
+ SeriesID: item.SeriesID,
Type: item.Type,
ModelType: item.ModelType,
Model: item.Model,
+ CatalogID: item.CatalogID,
CompanyName: item.CompanyName,
RecordNumber: item.RecordNumber,
EnergyEfficiencyClass: item.EnergyEfficiencyClass,
RecordTime: item.RecordTime,
- Price: newPrice,
PhysicalPicturePath: 'static/EecProductData/' + item.PhysicalPicturePath,
CertificatePath: `static/EecProductData/${item.CertificatePath}`,
Tip: `澶囨鏃堕棿锛�${item.RecordTime} \n 澶囨鍙凤細${item.RecordNumber}`,
};
});
- for (let i = 0; i < result.length; i += 15) {
- arr.push(result.slice(i, i + 15));
+ for (let i = 0; i < pageSeriesList.length; i += 15) {
+ arr.push(pageSeriesList.slice(i, i + 15));
}
state.catalogItemList = arr;
@@ -1127,14 +1072,23 @@
};
initCatalogList(cb);
};
+const handleSeriesClick = (item: any) => {
+ router.push({
+ path: '/product-series',
+ query: {
+ sid: item.SeriesID,
+ ft: 'home',
+ cid: item.CatalogID,
+ type: state.curSelectCatalog,
+ },
+ });
+};
// 浜у搧绫诲瀷鐐瑰嚮
-const handleCatalogClick = (item: any) => {
- const type = item.Type;
- const companyID = getCompanyItemByType(type)[0].CompanyId;
+const handleCatalogClick = () => {
+ const type = state.curSelectCatalog;
router.push({
path: '/certified-products',
query: {
- company: companyID,
type: type,
},
});
@@ -1143,7 +1097,7 @@
const onSwiper = (swiper: any) => {
catalogSwiperRef.value = swiper;
};
-const onSlideChange = () => {};
+const onSlideChange = () => { };
const toFeedBack = () => {
router.push('/feedback');
};
@@ -1185,7 +1139,8 @@
.carousel-image {
width: 100%;
height: 100%;
- object-fit: fill; /* 淇敼涓篺ill浠ュ畬鍏ㄥ～鍏呭鍣� */
+ object-fit: fill;
+ /* 淇敼涓篺ill浠ュ畬鍏ㄥ～鍏呭鍣� */
}
.function-card {
@@ -1196,9 +1151,11 @@
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
+
.eec-product-div {
background-image: url('@/assets/home/eec_product_bg.jpg');
}
+
.eec-product-num-div {
min-width: 230px;
border: 1px solid rgb(28, 151, 183);
@@ -1207,14 +1164,17 @@
overflow: hidden;
height: 255px;
}
+
#eec-product-map {
width: 100%;
height: 100%;
}
+
.mySwiper {
width: 100%;
height: 100%;
}
+
.card-hover-style {
/* display: flex;
justify-content: center;
@@ -1224,6 +1184,7 @@
color: #000;
margin-right: unset;
}
+
:deep(.el-carousel__arrow) {
background-color: rgba(0, 0, 0, 0.5);
border: none;
@@ -1260,6 +1221,7 @@
.catalog-list {
padding: 20px;
box-sizing: border-box;
+
.catalog-item {
display: flex;
justify-content: center;
@@ -1268,15 +1230,19 @@
color: #003a8f;
font-size: 20px;
font-weight: 700;
+
&:hover {
color: #71b02b;
}
}
}
+
.catalog-continer {
/* 鎬婚珮搴� - 涓婁笅padding - 琛岄棿璺� */
- height: 100%; /* 70px鏄笂涓媝adding鎬诲拰锛�60px鏄袱琛岄棿璺濇�诲拰 */
- padding: 35px; /* 鍋囪padding涓�20px锛屼綘鍙互鏍规嵁闇�瑕佽皟鏁� */
+ height: 100%;
+ /* 70px鏄笂涓媝adding鎬诲拰锛�60px鏄袱琛岄棿璺濇�诲拰 */
+ padding: 35px;
+ /* 鍋囪padding涓�20px锛屼綘鍙互鏍规嵁闇�瑕佽皟鏁� */
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
@@ -1287,15 +1253,18 @@
.catalog-continer-item {
background-color: #fff;
- height: 100%; /* 鏀逛负100%浠ラ�傚簲grid甯冨眬 */
+ height: 100%;
+ /* 鏀逛负100%浠ラ�傚簲grid甯冨眬 */
border-radius: 20px;
box-sizing: border-box;
cursor: pointer;
+
&:hover {
img {
transform: scale(1.05);
transition: all 1s ease;
}
+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
}
@@ -1313,6 +1282,7 @@
.left-news-temp-div {
border: 1px solid #ccc;
+
&::before {
content: '';
position: absolute;
@@ -1327,6 +1297,7 @@
.right-news-temp-div {
/* border-top: 4px solid #003a8f; */
position: relative;
+
&::before {
content: '';
position: absolute;
@@ -1337,6 +1308,7 @@
z-index: 1;
background-color: #71b02b;
}
+
&::after {
content: '';
position: absolute;
@@ -1356,6 +1328,7 @@
font-weight: 300;
}
}
+
.news-list-dot {
width: 6px;
height: 6px;
@@ -1364,6 +1337,7 @@
.eec-product-classify-div {
position: relative;
+
&::before {
content: '';
position: absolute;
@@ -1374,6 +1348,7 @@
z-index: 1;
background-color: #71b02b;
}
+
&::after {
content: '';
position: absolute;
@@ -1411,6 +1386,7 @@
opacity: 0;
transform: translateY(16px);
}
+
to {
opacity: 1;
transform: translateY(0);
@@ -1422,6 +1398,7 @@
opacity: 1;
transform: translateY(0);
}
+
to {
opacity: 0;
transform: translateY(16px);
@@ -1435,32 +1412,50 @@
.fade-leave-active {
animation: fadeOut 0.3s ease-out;
}
+
.etiquet-price {
- background: #003a8f;
- margin-left: -0.65rem;
- padding: .2rem 1.2rem;
- border-radius: 5px 0 0 5px;
+ background: #003a8f;
+ margin-left: -0.65rem;
+ padding: .2rem 1.2rem;
+ border-radius: 5px 0 0 5px;
}
.etiquet-price p {
- height: 20px;
- margin: 0;
- display: flex;
- font-size: 14px;
- font-weight: 600;
- line-height: 20px;
- color: #fff;
+ height: 20px;
+ margin: 0;
+ display: flex;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 20px;
+ color: #fff;
}
.etiquet-price div {
- position: absolute;
- bottom: -23px;
- right: 0px;
- width: 0;
- height: 0;
- border-top: 13px solid #003a8f;
- border-bottom: 10px solid transparent;
- border-right: 13px solid transparent;
- z-index: -6;
+ position: absolute;
+ bottom: -23px;
+ right: 0px;
+ width: 0;
+ height: 0;
+ border-top: 13px solid #003a8f;
+ border-bottom: 10px solid transparent;
+ border-right: 13px solid transparent;
+ z-index: -6;
+}
+
+.more-series-btn {
+ top: 66px;
+ right: 30px;
+ height: 35px;
+ position: absolute;
+ width: 100%;
+ justify-content: flex-end;
+ align-items: center;
+ display: flex;
+ cursor: pointer;
+ z-index: 30;
+
+ &:hover {
+ color: var(--theme-color);
+ }
}
</style>
--
Gitblit v1.9.3