833 lines
20 KiB
Vue
833 lines
20 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import { corpProfiles } from '../../data/corpProfiles'
|
||
|
||
const c = corpProfiles.art
|
||
|
||
/* 先锋展览手册 */
|
||
const zineIdx = ref(-1)
|
||
const zine = ref(null)
|
||
function openZine(i) {
|
||
zineIdx.value = i
|
||
zine.value = c.cases[i]
|
||
}
|
||
function closeZine() {
|
||
zineIdx.value = -1
|
||
zine.value = null
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="ag">
|
||
<nav class="ag-nav">
|
||
<b class="ag-logo">LUMINA*</b>
|
||
<div class="ag-menu">
|
||
<a href="#shows">SHOWS</a>
|
||
<a href="#manifesto">宣言</a>
|
||
</div>
|
||
<router-link to="/corp" class="ag-back">EXIT→合集</router-link>
|
||
</nav>
|
||
|
||
<!-- 跑马灯 -->
|
||
<div class="ag-ticker" aria-hidden="true"><span>拾光美术馆 LUMINA GALLERY ✳ 当代艺术不需要被看懂 ✳ 需要被看见 ✳ 拾光美术馆 LUMINA GALLERY ✳ 当代艺术不需要被看懂 ✳ 需要被看见 ✳</span></div>
|
||
|
||
<header class="ag-hero">
|
||
<span class="ag-ghost" aria-hidden="true">LUMINA</span>
|
||
<span class="ag-stamp" aria-hidden="true">NO MEANING<br />ALLOWED ✖</span>
|
||
<h1 class="ag-glitch" data-text="艺术?">艺术?</h1>
|
||
<p class="ag-hero-line1">ART IS A QUESTION</p>
|
||
<p class="ag-hero-line2">—— {{ c.slogan }}。{{ c.subSlogan }}。</p>
|
||
<div class="ag-hero-boxes">
|
||
<span>EST.{{ c.founded }}</span>
|
||
<span>{{ c.stats[0].value }} WORKS</span>
|
||
<span>{{ c.stats[2].value }} VISITORS/Y</span>
|
||
</div>
|
||
<span class="ag-sticker" aria-hidden="true">FREE ENTRY<br />免费入场 ↯</span>
|
||
</header>
|
||
|
||
<!-- 展览海报墙：故意贴歪的拼贴 -->
|
||
<section id="shows" class="ag-sec">
|
||
<h2 class="ag-h2">CURRENT<br />SHOWS ↓</h2>
|
||
<div class="ag-shows">
|
||
<article v-for="(w, i) in c.cases" :key="w.name" class="ag-show" :class="'s' + i" @click="openZine(i)">
|
||
<span class="ag-show-no">{{ String(i + 1).padStart(2, '0') }}</span>
|
||
<i class="ag-show-tape" aria-hidden="true"></i>
|
||
<img :src="w.image" :alt="w.name" loading="lazy" />
|
||
<div class="ag-show-info">
|
||
<h3>{{ w.name }}</h3>
|
||
<p>{{ w.tag }} / {{ w.year }} — {{ w.desc }}</p>
|
||
<span class="ag-show-more">OPEN ZINE ↗ 翻手册</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 先锋展览手册 -->
|
||
<Transition name="ag-slam">
|
||
<div v-if="zine" class="ag-mask" @click.self="closeZine">
|
||
<article class="ag-zine">
|
||
<button class="ag-zine-x" aria-label="关闭" @click="closeZine">✕ CLOSE</button>
|
||
<header class="ag-zine-head">
|
||
<span class="ag-zine-no">ZINE {{ String(zineIdx + 1).padStart(2, '0') }}</span>
|
||
<h3 class="ag-glitch" :data-text="zine.name">{{ zine.name }}</h3>
|
||
<p class="ag-zine-meta">{{ zine.tag }} / {{ zine.year }} / FREE ENTRY</p>
|
||
</header>
|
||
<div class="ag-zine-img">
|
||
<img :src="zine.image" :alt="zine.name" />
|
||
<span aria-hidden="true">FIG.{{ zineIdx + 1 }} — INSTALLATION VIEW</span>
|
||
</div>
|
||
<section class="ag-zine-block">
|
||
<b>STATEMENT 陈述</b>
|
||
<p>{{ zine.story }}</p>
|
||
</section>
|
||
<section class="ag-zine-block">
|
||
<b>WHY GO ↓ 看点</b>
|
||
<ul>
|
||
<li v-for="h in zine.highlights" :key="h">{{ h }}</li>
|
||
</ul>
|
||
</section>
|
||
<div class="ag-zine-cols">
|
||
<section class="ag-zine-block">
|
||
<b>LOG 记录</b>
|
||
<p v-for="t in zine.timeline" :key="t.at" class="ag-zine-tl"><i>{{ t.at }}</i>{{ t.event }}</p>
|
||
</section>
|
||
<section class="ag-zine-block">
|
||
<b>DATA 数据</b>
|
||
<div class="ag-zine-mx">
|
||
<div v-for="m in zine.metrics" :key="m.label"><b>{{ m.value }}</b><span>{{ m.label }}</span></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<footer class="ag-zine-foot">NO MEANING ALLOWED ✖ 手册免费带走 ✖ LUMINA*</footer>
|
||
</article>
|
||
</div>
|
||
</Transition>
|
||
|
||
<!-- 宣言 -->
|
||
<section id="manifesto" class="ag-sec ag-manifesto">
|
||
<h2 class="ag-h2">MANIFESTO</h2>
|
||
<div class="ag-mani-list">
|
||
<div v-for="(s, i) in c.services" :key="s.name" class="ag-mani-row">
|
||
<b>{{ String(i + 1).padStart(2, '0') }} {{ s.name }}</b>
|
||
<p>{{ s.desc }}</p>
|
||
</div>
|
||
</div>
|
||
<blockquote class="ag-quote">“{{ c.testimonials[0].text }}”<cite>— {{ c.testimonials[0].author }}</cite></blockquote>
|
||
</section>
|
||
|
||
<footer class="ag-footer">
|
||
<p class="ag-footer-big">COME<br />SEE US.</p>
|
||
<p>{{ c.contacts.addr }} · {{ c.contacts.phone }} · {{ c.contacts.email }}</p>
|
||
<p class="ag-links">
|
||
<router-link to="/corp">返回企业官网合集</router-link> /
|
||
<router-link to="/">个人页面合集</router-link>
|
||
</p>
|
||
<p class="ag-copy">© {{ c.founded }}–2026 {{ c.name }} — 风格演示页，机构与展览均为虚构</p>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.ag {
|
||
min-height: 100vh;
|
||
background: #101010;
|
||
color: #f4f4f4;
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
overflow-x: clip;
|
||
}
|
||
|
||
.ag-nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 40;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
padding: 14px clamp(16px, 5vw, 48px);
|
||
background: #101010;
|
||
border-bottom: 3px solid #f4f4f4;
|
||
}
|
||
.ag-logo {
|
||
font-size: 19px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.ag-menu {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
.ag-menu a {
|
||
color: #f4f4f4;
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.ag-menu a:hover {
|
||
background: #ff2e63;
|
||
}
|
||
.ag-back {
|
||
margin-left: auto;
|
||
color: #101010;
|
||
background: #ff2e63;
|
||
text-decoration: none;
|
||
font-size: 12.5px;
|
||
font-weight: 900;
|
||
padding: 6px 14px;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.ag-back:hover {
|
||
background: #08d9d6;
|
||
}
|
||
|
||
.ag-ticker {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
background: #ff2e63;
|
||
color: #101010;
|
||
font-weight: 900;
|
||
font-size: 13px;
|
||
padding: 7px 0;
|
||
}
|
||
.ag-ticker span {
|
||
display: inline-block;
|
||
animation: ag-roll 26s linear infinite;
|
||
}
|
||
@keyframes ag-roll {
|
||
to { transform: translateX(-50%); }
|
||
}
|
||
|
||
.ag {
|
||
position: relative;
|
||
}
|
||
.ag::after {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
|
||
opacity: 0.06;
|
||
pointer-events: none;
|
||
z-index: 90;
|
||
mix-blend-mode: overlay;
|
||
}
|
||
|
||
@keyframes ag-slam {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(1.18);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
.ag-hero {
|
||
position: relative;
|
||
padding: clamp(50px, 9vw, 100px) clamp(16px, 5vw, 48px) 70px;
|
||
border-bottom: 3px solid #f4f4f4;
|
||
overflow: clip;
|
||
}
|
||
.ag-ghost {
|
||
position: absolute;
|
||
right: -0.06em;
|
||
bottom: -0.14em;
|
||
font-size: clamp(72px, 17vw, 230px);
|
||
font-weight: 900;
|
||
line-height: 1;
|
||
letter-spacing: -0.04em;
|
||
color: transparent;
|
||
-webkit-text-stroke: 1.5px rgba(244, 244, 244, 0.15);
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
.ag-stamp {
|
||
position: absolute;
|
||
right: clamp(20px, 8vw, 120px);
|
||
top: clamp(46px, 8vw, 90px);
|
||
transform: rotate(12deg);
|
||
border: 3px solid #ff2e63;
|
||
color: #ff2e63;
|
||
font-size: clamp(13px, 1.8vw, 18px);
|
||
font-weight: 900;
|
||
letter-spacing: 0.12em;
|
||
line-height: 1.4;
|
||
padding: 10px 16px;
|
||
text-align: center;
|
||
opacity: 0.85;
|
||
animation: ag-stamp-in 0.4s 0.45s cubic-bezier(0.2, 2, 0.5, 1) both;
|
||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 -0.6'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 -0.6'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
|
||
}
|
||
@keyframes ag-stamp-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: rotate(12deg) scale(2.4);
|
||
}
|
||
to {
|
||
opacity: 0.85;
|
||
transform: rotate(12deg) scale(1);
|
||
}
|
||
}
|
||
.ag-sticker {
|
||
position: absolute;
|
||
right: clamp(24px, 10vw, 160px);
|
||
bottom: 42px;
|
||
transform: rotate(-7deg);
|
||
background: #ffd93d;
|
||
color: #101010;
|
||
font-size: 13px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.1em;
|
||
line-height: 1.5;
|
||
text-align: center;
|
||
padding: 10px 18px;
|
||
box-shadow: 5px 5px 0 #ff2e63;
|
||
}
|
||
.ag-glitch {
|
||
position: relative;
|
||
margin: 0 0 10px;
|
||
font-size: clamp(80px, 17vw, 210px);
|
||
font-weight: 900;
|
||
line-height: 0.9;
|
||
letter-spacing: -0.05em;
|
||
animation: ag-slam 0.28s steps(3) both;
|
||
}
|
||
.ag-glitch::before,
|
||
.ag-glitch::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0.85;
|
||
}
|
||
.ag-glitch::before {
|
||
color: #ff2e63;
|
||
transform: translate(5px, -3px);
|
||
z-index: -1;
|
||
animation: ag-glitch-a 3.2s steps(1) infinite;
|
||
}
|
||
.ag-glitch::after {
|
||
color: #08d9d6;
|
||
transform: translate(-5px, 3px);
|
||
z-index: -2;
|
||
animation: ag-glitch-b 2.7s steps(1) infinite;
|
||
}
|
||
@keyframes ag-glitch-a {
|
||
0%, 88%, 100% { transform: translate(5px, -3px); clip-path: none; }
|
||
90% { transform: translate(12px, -1px); clip-path: inset(12% 0 60% 0); }
|
||
93% { transform: translate(2px, -6px); clip-path: inset(58% 0 8% 0); }
|
||
96% { transform: translate(9px, 2px); clip-path: inset(30% 0 42% 0); }
|
||
}
|
||
@keyframes ag-glitch-b {
|
||
0%, 84%, 100% { transform: translate(-5px, 3px); clip-path: none; }
|
||
86% { transform: translate(-13px, 5px); clip-path: inset(44% 0 26% 0); }
|
||
90% { transform: translate(-3px, 8px); clip-path: inset(4% 0 76% 0); }
|
||
95% { transform: translate(-10px, 0); clip-path: inset(68% 0 4% 0); }
|
||
}
|
||
.ag-hero-line1 {
|
||
position: relative;
|
||
margin: 0 0 8px;
|
||
font-size: clamp(16px, 3vw, 26px);
|
||
font-weight: 900;
|
||
letter-spacing: 0.28em;
|
||
color: #ff2e63;
|
||
animation: ag-slam 0.3s 0.1s steps(3) both;
|
||
}
|
||
.ag-hero-line2 {
|
||
position: relative;
|
||
margin: 0 0 26px;
|
||
font-size: 14px;
|
||
color: #b0b0b0;
|
||
max-width: 560px;
|
||
line-height: 1.9;
|
||
animation: ag-slam 0.3s 0.16s steps(3) both;
|
||
}
|
||
.ag-hero-boxes {
|
||
position: relative;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
animation: ag-slam 0.3s 0.22s steps(3) both;
|
||
}
|
||
.ag-hero-boxes span {
|
||
border: 2px solid #f4f4f4;
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.1em;
|
||
padding: 7px 14px;
|
||
}
|
||
|
||
.ag-sec {
|
||
padding: 60px clamp(16px, 5vw, 48px) 80px;
|
||
border-bottom: 3px solid #f4f4f4;
|
||
}
|
||
.ag-h2 {
|
||
margin: 0 0 44px;
|
||
font-size: clamp(30px, 6vw, 56px);
|
||
font-weight: 900;
|
||
line-height: 0.95;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
/* 海报墙：错位 + 旋转 + 交叠 */
|
||
.ag-shows {
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 44px 26px;
|
||
align-items: start;
|
||
}
|
||
.ag-show {
|
||
position: relative;
|
||
border: 3px solid #f4f4f4;
|
||
background: #181818;
|
||
transform: rotate(var(--tilt, 0deg));
|
||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||
}
|
||
.ag-show.s0 {
|
||
grid-column: 1 / 8;
|
||
--tilt: -1.4deg;
|
||
}
|
||
.ag-show.s1 {
|
||
grid-column: 8 / 13;
|
||
--tilt: 1.8deg;
|
||
margin-top: 84px;
|
||
}
|
||
.ag-show.s2 {
|
||
grid-column: 2 / 7;
|
||
--tilt: 1.1deg;
|
||
margin-top: -48px;
|
||
}
|
||
.ag-show.s3 {
|
||
grid-column: 7 / 12;
|
||
--tilt: -2.1deg;
|
||
margin-top: 36px;
|
||
}
|
||
.ag-show:hover {
|
||
transform: rotate(0deg) translate(-4px, -4px);
|
||
z-index: 3;
|
||
}
|
||
.ag-show.s0:hover { box-shadow: 10px 10px 0 #ff2e63; }
|
||
.ag-show.s1:hover { box-shadow: 10px 10px 0 #08d9d6; }
|
||
.ag-show.s2:hover { box-shadow: 10px 10px 0 #ffd93d; }
|
||
.ag-show.s3:hover { box-shadow: 10px 10px 0 #f4f4f4; }
|
||
.ag-show-no {
|
||
position: absolute;
|
||
left: -10px;
|
||
top: -14px;
|
||
z-index: 2;
|
||
background: #f4f4f4;
|
||
color: #101010;
|
||
font-size: 15px;
|
||
font-weight: 900;
|
||
padding: 6px 14px;
|
||
transform: rotate(-4deg);
|
||
}
|
||
.ag-show-tape {
|
||
position: absolute;
|
||
right: 16px;
|
||
top: -12px;
|
||
z-index: 2;
|
||
width: 74px;
|
||
height: 22px;
|
||
background: rgba(244, 244, 244, 0.16);
|
||
border: 1px dashed rgba(244, 244, 244, 0.3);
|
||
transform: rotate(5deg);
|
||
}
|
||
.ag-show img {
|
||
width: 100%;
|
||
aspect-ratio: 4 / 3;
|
||
object-fit: cover;
|
||
display: block;
|
||
filter: grayscale(0.6) contrast(1.15);
|
||
transition: filter 0.25s ease;
|
||
}
|
||
.ag-show:hover img {
|
||
filter: none;
|
||
animation: ag-jitter 0.3s steps(2) 2;
|
||
}
|
||
@keyframes ag-jitter {
|
||
0%, 100% { transform: translate(0, 0); }
|
||
25% { transform: translate(-3px, 2px); }
|
||
50% { transform: translate(2px, -2px); }
|
||
75% { transform: translate(-1px, -1px); }
|
||
}
|
||
.ag-show-info {
|
||
padding: 16px;
|
||
border-top: 3px solid #f4f4f4;
|
||
}
|
||
.ag-show-info h3 {
|
||
margin: 0 0 8px;
|
||
font-size: 19px;
|
||
font-weight: 900;
|
||
}
|
||
.ag-show-info p {
|
||
margin: 0;
|
||
font-size: 12px;
|
||
line-height: 1.8;
|
||
color: #b0b0b0;
|
||
}
|
||
|
||
.ag-manifesto {
|
||
background: #f4f4f4;
|
||
color: #101010;
|
||
}
|
||
.ag-mani-list {
|
||
max-width: 820px;
|
||
transform: rotate(-0.5deg);
|
||
}
|
||
.ag-mani-row {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: minmax(150px, 240px) 1fr;
|
||
gap: 14px;
|
||
padding: 18px 52px 18px 10px;
|
||
border-bottom: 2px solid #101010;
|
||
transition: background 0.15s steps(2), color 0.15s steps(2);
|
||
}
|
||
.ag-mani-row::after {
|
||
content: '→';
|
||
position: absolute;
|
||
right: 18px;
|
||
top: 50%;
|
||
transform: translate(8px, -50%);
|
||
font-weight: 900;
|
||
font-size: 18px;
|
||
opacity: 0;
|
||
transition: opacity 0.15s steps(2), transform 0.15s steps(2);
|
||
}
|
||
.ag-mani-row:hover {
|
||
background: #101010;
|
||
color: #f4f4f4;
|
||
}
|
||
.ag-mani-row:hover::after {
|
||
opacity: 1;
|
||
transform: translate(0, -50%);
|
||
}
|
||
.ag-mani-row:hover p {
|
||
color: #b0b0b0;
|
||
}
|
||
.ag-mani-row b {
|
||
font-size: 15px;
|
||
font-weight: 900;
|
||
}
|
||
.ag-mani-row p {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
line-height: 1.8;
|
||
color: #4c4c4c;
|
||
}
|
||
.ag-quote {
|
||
margin: 40px 0 0;
|
||
max-width: 640px;
|
||
font-size: clamp(17px, 2.6vw, 24px);
|
||
font-weight: 900;
|
||
line-height: 1.6;
|
||
}
|
||
.ag-quote cite {
|
||
display: block;
|
||
margin-top: 12px;
|
||
font-style: normal;
|
||
font-size: 12.5px;
|
||
font-weight: 400;
|
||
color: #6e6e6e;
|
||
}
|
||
|
||
.ag-footer {
|
||
padding: 60px clamp(16px, 5vw, 48px) 46px;
|
||
}
|
||
.ag-footer-big {
|
||
margin: 0 0 26px;
|
||
font-size: clamp(46px, 9vw, 110px);
|
||
font-weight: 900;
|
||
line-height: 0.9;
|
||
color: #ff2e63;
|
||
width: fit-content;
|
||
cursor: default;
|
||
transition: transform 0.12s steps(2), text-shadow 0.12s steps(2);
|
||
}
|
||
.ag-footer-big::after {
|
||
content: '▮';
|
||
margin-left: 12px;
|
||
color: #08d9d6;
|
||
animation: ag-blink 1.1s steps(1) infinite;
|
||
}
|
||
@keyframes ag-blink {
|
||
50% { opacity: 0; }
|
||
}
|
||
.ag-footer-big:hover {
|
||
transform: skewX(-5deg);
|
||
text-shadow: 7px 0 0 #08d9d6, -7px 0 0 #ffd93d;
|
||
}
|
||
.ag-footer p {
|
||
font-size: 13px;
|
||
color: #b0b0b0;
|
||
margin: 0 0 10px;
|
||
}
|
||
.ag-links a {
|
||
color: #08d9d6;
|
||
text-decoration: none;
|
||
margin-right: 6px;
|
||
}
|
||
.ag-links a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
.ag-copy {
|
||
font-size: 11px !important;
|
||
color: #6e6e6e !important;
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.ag-shows {
|
||
gap: 34px 0;
|
||
}
|
||
.ag-show.s0,
|
||
.ag-show.s1,
|
||
.ag-show.s2,
|
||
.ag-show.s3 {
|
||
grid-column: 1 / -1;
|
||
margin-top: 0;
|
||
}
|
||
.ag-sticker {
|
||
display: none;
|
||
}
|
||
.ag-ghost {
|
||
font-size: clamp(64px, 22vw, 120px);
|
||
}
|
||
}
|
||
@media (max-width: 560px) {
|
||
.ag-mani-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 6px;
|
||
}
|
||
}
|
||
|
||
/* ---- 先锋展览手册 ---- */
|
||
.ag-show {
|
||
cursor: pointer;
|
||
}
|
||
.ag-show-more {
|
||
display: inline-block;
|
||
margin-top: 8px;
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.1em;
|
||
color: #101010;
|
||
background: #08d9d6;
|
||
padding: 3px 10px;
|
||
opacity: 0;
|
||
transform: translateY(4px) rotate(-2deg);
|
||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||
}
|
||
.ag-show:hover .ag-show-more {
|
||
opacity: 1;
|
||
transform: translateY(0) rotate(-2deg);
|
||
}
|
||
.ag-mask {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 520;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 20px;
|
||
background: rgba(16, 16, 16, 0.88);
|
||
}
|
||
.ag-zine {
|
||
position: relative;
|
||
width: min(640px, 94vw);
|
||
max-height: 88vh;
|
||
overflow-y: auto;
|
||
background: #101010;
|
||
border: 3px solid #f4f4f4;
|
||
box-shadow: 12px 12px 0 #ff2e63;
|
||
color: #f4f4f4;
|
||
}
|
||
.ag-zine-x {
|
||
position: sticky;
|
||
top: 0;
|
||
left: 100%;
|
||
z-index: 3;
|
||
display: block;
|
||
border: none;
|
||
background: #ff2e63;
|
||
color: #101010;
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.1em;
|
||
padding: 8px 14px;
|
||
cursor: pointer;
|
||
}
|
||
.ag-zine-x:hover {
|
||
background: #08d9d6;
|
||
}
|
||
.ag-zine-head {
|
||
padding: 8px 26px 18px;
|
||
border-bottom: 3px solid #f4f4f4;
|
||
}
|
||
.ag-zine-no {
|
||
display: inline-block;
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.2em;
|
||
background: #f4f4f4;
|
||
color: #101010;
|
||
padding: 2px 10px;
|
||
transform: rotate(-1.5deg);
|
||
}
|
||
.ag-zine-head h3 {
|
||
margin: 12px 0 6px;
|
||
font-size: clamp(28px, 5vw, 44px);
|
||
font-weight: 900;
|
||
letter-spacing: -0.03em;
|
||
line-height: 1.05;
|
||
}
|
||
.ag-zine-meta {
|
||
margin: 0;
|
||
font-size: 11.5px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.14em;
|
||
color: #8d8d8d;
|
||
}
|
||
.ag-zine-img {
|
||
position: relative;
|
||
border-bottom: 3px solid #f4f4f4;
|
||
}
|
||
.ag-zine-img img {
|
||
display: block;
|
||
width: 100%;
|
||
aspect-ratio: 16 / 8;
|
||
object-fit: cover;
|
||
filter: grayscale(0.35) contrast(1.12);
|
||
}
|
||
.ag-zine-img span {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
background: #101010;
|
||
color: #08d9d6;
|
||
font-size: 9.5px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.18em;
|
||
padding: 4px 12px;
|
||
}
|
||
.ag-zine-block {
|
||
padding: 16px 26px;
|
||
}
|
||
.ag-zine-block > b {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.16em;
|
||
color: #ff2e63;
|
||
}
|
||
.ag-zine-block p {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
line-height: 1.95;
|
||
color: #cfcfcf;
|
||
}
|
||
.ag-zine-block ul {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
.ag-zine-block ul li {
|
||
position: relative;
|
||
padding: 4px 0 4px 24px;
|
||
font-size: 13px;
|
||
line-height: 1.8;
|
||
color: #f4f4f4;
|
||
font-weight: 700;
|
||
}
|
||
.ag-zine-block ul li::before {
|
||
content: '✖';
|
||
position: absolute;
|
||
left: 0;
|
||
color: #08d9d6;
|
||
}
|
||
.ag-zine-cols {
|
||
display: grid;
|
||
grid-template-columns: 1.2fr 1fr;
|
||
border-top: 1.5px dashed #4a4a4a;
|
||
}
|
||
.ag-zine-cols .ag-zine-block + .ag-zine-block {
|
||
border-left: 1.5px dashed #4a4a4a;
|
||
}
|
||
.ag-zine-tl {
|
||
margin: 0 0 7px !important;
|
||
font-size: 12px !important;
|
||
}
|
||
.ag-zine-tl i {
|
||
display: block;
|
||
font-style: normal;
|
||
font-weight: 900;
|
||
color: #08d9d6;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.ag-zine-mx {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
.ag-zine-mx > div {
|
||
border: 2px solid #f4f4f4;
|
||
padding: 8px 10px;
|
||
transform: rotate(-0.6deg);
|
||
}
|
||
.ag-zine-mx > div:nth-child(2) {
|
||
transform: rotate(0.8deg);
|
||
border-color: #ff2e63;
|
||
}
|
||
.ag-zine-mx > div:nth-child(3) {
|
||
transform: rotate(-1deg);
|
||
border-color: #08d9d6;
|
||
}
|
||
.ag-zine-mx b {
|
||
display: block;
|
||
font-size: 19px;
|
||
font-weight: 900;
|
||
}
|
||
.ag-zine-mx span {
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
color: #8d8d8d;
|
||
}
|
||
.ag-zine-foot {
|
||
padding: 12px 26px 18px;
|
||
border-top: 3px solid #f4f4f4;
|
||
font-size: 10.5px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.2em;
|
||
color: #8d8d8d;
|
||
}
|
||
.ag-slam-enter-active,
|
||
.ag-slam-leave-active {
|
||
transition: opacity 0.22s ease;
|
||
}
|
||
.ag-slam-enter-active .ag-zine {
|
||
transition: transform 0.28s cubic-bezier(0.2, 1.4, 0.4, 1);
|
||
}
|
||
.ag-slam-leave-active .ag-zine {
|
||
transition: transform 0.2s ease;
|
||
}
|
||
.ag-slam-enter-from,
|
||
.ag-slam-leave-to {
|
||
opacity: 0;
|
||
}
|
||
.ag-slam-enter-from .ag-zine {
|
||
transform: scale(1.12) rotate(2deg);
|
||
}
|
||
.ag-slam-leave-to .ag-zine {
|
||
transform: scale(0.94);
|
||
}
|
||
@media (max-width: 560px) {
|
||
.ag-zine-cols {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.ag-zine-cols .ag-zine-block + .ag-zine-block {
|
||
border-left: none;
|
||
border-top: 1.5px dashed #4a4a4a;
|
||
}
|
||
}
|
||
</style>
|