gpttemp

code/public/static/css/modules/banner/banner_01.css

@@ -0,0 +1,48 @@
+/* banner_01.css */
+.__PFX__-b1-wrap {
+    margin: 16px 0;
+}
+
+.__PFX__-b1-link {
+    display: block;
+}
+
+.__PFX__-b1-figure {
+    position: relative;
+}
+
+.__PFX__-b1-img {
+    width: 100%;
+    height: 170px;
+    border-radius: 14px;
+    object-fit: cover;
+}
+
+.__PFX__-b1-cap {
+    position: absolute;
+    left: 12px;
+    right: 12px;
+    bottom: 12px;
+    background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent);
+    color: #fff;
+    padding: 10px;
+    border-radius: 10px;
+}
+
+.__PFX__-b1-cap h2 {
+    font-size: 16px;
+    margin-bottom: 4px;
+}
+
+.__PFX__-b1-cap p {
+    font-size: 12px;
+    opacity: .9;
+}
+
+@media(min-width:768px) {
+    .__PFX__-b1-img {
+        height: 240px;
+    }
+
+    
+}

code/public/static/css/modules/banner/banner_02.css

@@ -0,0 +1,29 @@
+/* banner_02.css */
+.__PFX__-b2-box {
+    margin: 16px 0;
+}
+.__PFX__-b2-click {
+    display: flex;
+    gap: 12px;
+    padding: 12px;
+    background: #fff;
+    border-radius: 14px;
+    border: 1px solid rgba(0,0,0,.05);
+}
+.__PFX__-b2-left h3 {
+    font-size: 16px;
+    color: var(--primary-color);
+}
+.__PFX__-b2-left span {
+    font-size: 12px;
+    color: #777;
+}
+.__PFX__-b2-thumb {
+    width: 100px;
+    height: 60px;
+    border-radius: 8px;
+    object-fit: cover;
+}
+@media(min-width:768px){
+    .__PFX__-b2-thumb { width: 130px; height: 80px; }
+}

code/public/static/css/modules/banner/banner_03.css

@@ -0,0 +1,23 @@
+/* banner_03.css */
+.__PFX__-b3-hscroll {
+    margin: 16px 0;
+    overflow-x: auto;
+}
+.__PFX__-b3-list {
+    display: flex;
+    gap: 12px;
+}
+.__PFX__-b3-item {
+    width: 160px;
+    flex-shrink: 0;
+}
+.__PFX__-b3-img {
+    width: 100%;
+    height: 110px;
+    object-fit: cover;
+    border-radius: 10px;
+}
+.__PFX__-b3-title {
+    font-size: 13px;
+    margin-top: 6px;
+}

code/public/static/css/modules/banner/banner_04.css

@@ -0,0 +1,19 @@
+/* banner_04.css */
+.__PFX__-b4-strip {
+    margin: 16px 0;
+}
+.__PFX__-b4-inner {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    background: #f6f6f6;
+    border-radius: 12px;
+}
+.__PFX__-b4-icon {
+    font-size: 16px;
+}
+.__PFX__-b4-inner small {
+    font-size: 13px;
+    color: #555;
+}

code/public/static/css/modules/banner/banner_05.css

@@ -0,0 +1,33 @@
+/* banner_05.css */
+.__PFX__-b5-box {
+    margin: 16px 0;
+}
+.__PFX__-b5-imgwrap {
+    position: relative;
+}
+.__PFX__-b5-img {
+    width: 100%;
+    height: 170px;
+    border-radius: 14px;
+    object-fit: cover;
+}
+.__PFX__-b5-foot {
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    bottom: 12px;
+    padding: 8px 10px;
+    border-radius: 10px;
+    background: rgba(0,0,0,.45);
+    color: #fff;
+}
+.__PFX__-b5-foot h4 {
+    font-size: 15px;
+    margin-bottom: 4px;
+}
+.__PFX__-b5-foot span {
+    font-size: 12px;
+}
+@media(min-width:768px){
+    .__PFX__-b5-img { height: 240px; }
+}