|
|
@@ -43,6 +43,7 @@
|
|
|
>
|
|
|
<div class="new-white-box"
|
|
|
:class="{ 'active': activeButton === index, 'disabled': courseType.isDisabled }"
|
|
|
+ :style="{ '--lock-image': `url(${lockImage})` }"
|
|
|
@click="goToProgrammingList(courseType, index)">
|
|
|
<!-- 列表封面图 -->
|
|
|
<div class="bg-image-container" :style="{ backgroundImage: `url(${courseType.bgImage})` }">
|
|
|
@@ -80,9 +81,9 @@
|
|
|
<div class="bottom-box">
|
|
|
<div class="line-container">
|
|
|
<div class="bold-line"></div>
|
|
|
- <div
|
|
|
- v-for="(button, index) in circleButtons"
|
|
|
- :key="index"
|
|
|
+ <div
|
|
|
+ v-for="(button, index) in circleButtons"
|
|
|
+ :key="index"
|
|
|
class="circle-button"
|
|
|
:class="{ 'active': activeButton === index }"
|
|
|
@click="activeButton = index"
|
|
|
@@ -269,7 +270,7 @@ onMounted(() => {
|
|
|
if (title) {
|
|
|
pageTitle.value = title
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
const id = route.query.categoryId
|
|
|
if (id) {
|
|
|
categoryId.value = id
|
|
|
@@ -369,7 +370,7 @@ const disableBlockly = (blocklyId = categoryId.value) => {
|
|
|
height: 100%;
|
|
|
}
|
|
|
.top-center-inner-box{
|
|
|
- background-size: 70%;
|
|
|
+ background-size: 70%;
|
|
|
background-position: 50% 80%;
|
|
|
background-repeat: no-repeat;
|
|
|
display: flex; /* 使用flex布局 */
|
|
|
@@ -396,7 +397,7 @@ const disableBlockly = (blocklyId = categoryId.value) => {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.middle-wrapper {
|
|
|
height: 60%;
|
|
|
overflow: hidden; /* 溢出隐藏 */
|
|
|
@@ -443,7 +444,7 @@ const disableBlockly = (blocklyId = categoryId.value) => {
|
|
|
|
|
|
|
|
|
.new-white-box {
|
|
|
- width: 100%;
|
|
|
+ width: 100%;
|
|
|
height: 65%;
|
|
|
margin-top: rpx(20);
|
|
|
background-color: white;
|
|
|
@@ -459,7 +460,7 @@ const disableBlockly = (blocklyId = categoryId.value) => {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: -rpx(8);
|
|
|
- left: 50%;
|
|
|
+ left: 50.5%;
|
|
|
transform: translateX(-50%);
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
@@ -480,20 +481,42 @@ const disableBlockly = (blocklyId = categoryId.value) => {
|
|
|
/* 禁用状态样式 */
|
|
|
.new-white-box.disabled {
|
|
|
cursor: not-allowed;
|
|
|
- filter: grayscale(80%);
|
|
|
+ filter: grayscale(0%); /* 改为100%黑白色 */
|
|
|
pointer-events: none;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
/* 禁用状态下的文字颜色 */
|
|
|
.new-white-box.disabled .box-title {
|
|
|
- color: #999;
|
|
|
+ color: #676666;
|
|
|
}
|
|
|
|
|
|
+/* 禁用状态下的遮挡层 */
|
|
|
+.new-white-box.disabled::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ background-image: var(--lock-image);
|
|
|
+ background-size: 40%;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ border-radius: rpx(15);
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+/* 小三角效果 */
|
|
|
+.new-white-box.disabled::after {
|
|
|
+ top: rpx(150);
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
|
|
|
/* 背景图容器 */
|
|
|
.bg-image-container {
|
|
|
width: 100%;
|
|
|
- height: 85%;
|
|
|
+ height: 85%;
|
|
|
background-size: 105%;
|
|
|
background-position: center;
|
|
|
background-repeat: no-repeat;
|