*{
box-sizing:border-box;
}
html,
body{
margin:0;
padding:0;
width:100%;
height:100%;
font-family:
-apple-system,
BlinkMacSystemFont,
"PingFang SC",
sans-serif;
overflow:hidden;
background:#fff;
}
/* 页面容器 */
.page{
height:100vh;
max-width:430px;
margin:auto;
}
/* 内容滚动 */
.content{
height:100vh;
overflow-y:auto;
padding-bottom:120px;
scrollbar-width:none;
}
.content::-webkit-scrollbar{
display:none;
}
/***************
顶部图片
****************/
.hero{
height:390px;
position:relative;
overflow:hidden;
}
.hero-slider{
position:relative;
width:100%;
height:100%;
}
/* 每一张轮播图都是跳转链接 */
.hero-slide{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
display:block;
opacity:0;
pointer-events:none;
transition:opacity 1s ease;
-webkit-tap-highlight-color:transparent;
}
/* 当前显示的轮播图 */
.hero-slide.active{
opacity:1;
pointer-events:auto;
}
/* 图片 */
.hero-slide img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
/* 点击反馈 */
.hero-slide:active{
opacity:.9;
}
.hero-slider img.active{
opacity:1;
}
.hero-title{
position:absolute;
right:25px;
top:80px;
font-size:40px;
font-weight:900;
color:white;
}
/***************
快捷入口按钮
****************/
.icon-menu{
display:flex;
overflow-x:auto;
gap:18px;
padding:20px;
}
.icon-menu::-webkit-scrollbar{
display:none;
}
/*
每个入口
图标在上
文字在下
*/
.icon-menu a{
min-width:75px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-decoration:none;
color:#555;
font-size:14px;
}
/*
SVG外层盒子
负责限制SVG尺寸
*/
.icon-box{
width:72px;
height:72px;
background:#fafafa;
border-radius:22px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
margin-bottom:10px;
}
/*
SVG图片
不修改原SVG文件
通过CSS缩放控制
*/
.icon-box img{
width:120%;
height:120%;
object-fit:contain;
transform:scale(.35);
}
.icon-menu span{
white-space:nowrap;
font-size:14px;
}
/***************
卡片
****************/
.ai-card{
margin:20px;
padding:25px;
border-radius:30px;
background:#edf7ff;
}
.ai-card a{
color:#1677ff;
font-size:18px;
}
/****************
推荐功能图片区
*****************/
.feature-grid{
display:grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
gap:10px;
padding:0 14px 22px;
}
/* 所有卡片 */
.feature-card{
display:block;
position:relative;
overflow:hidden;
border-radius:24px;
text-decoration:none;
background:#f3f6f7;
-webkit-tap-highlight-color:transparent;
transition:
transform .18s ease,
opacity .18s ease;
}
/* 点击反馈 */
.feature-card:active{
transform:scale(.98);
opacity:.88;
}
/* 左侧大卡片 */
.feature-card-large{
height:172px;
}
/* 右侧两张卡片容器 */
.feature-card-right{
display:grid;
grid-template-rows:1fr 1fr;
gap:10px;
height:172px;
}
/* 右侧小卡片 */
.feature-card-small{
min-height:0;
}
/* 图片 */
.feature-card img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
/* 小屏适配 */
@media(max-width:360px){
.feature-grid{
gap:8px;
padding-left:12px;
padding-right:12px;
}
.feature-card-large,
.feature-card-right{
height:154px;
}
.feature-card{
border-radius:20px;
}
}
/************************
城市日历
************************/
.calendar-section {
padding: 26px 14px;
overflow: hidden;
}
.calendar-section h2 {
margin: 0 0 18px;
color: #333;
font-size: 28px;
line-height: 1.2;
font-weight: 700;
}
/************************
横向滚动区域
************************/
.scroll-row {
display: flex;
align-items: flex-start;
gap: 12px;
overflow-x: auto;
padding: 2px 0 12px;
scrollbar-width: none;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.scroll-row::-webkit-scrollbar {
display: none;
}
/************************
日历图片链接
************************/
.calendar-card {
flex: 0 0 52%;
display: block;
overflow: hidden;
border-radius: 14px;
background: transparent;
color: inherit;
text-decoration: none;
scroll-snap-align: start;
box-shadow:
0 7px 18px rgba(0, 0, 0, 0.08);
-webkit-tap-highlight-color: transparent;
transition:
transform 0.18s ease,
opacity 0.18s ease;
}
.calendar-card:link,
.calendar-card:visited,
.calendar-card:hover,
.calendar-card:active {
color: inherit;
text-decoration: none;
}
/************************
图片等比缩小
************************/
.calendar-card img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/************************
点击反馈
************************/
.calendar-card:active {
opacity: 0.9;
transform: scale(0.985);
}
/************************
小屏幕适配
************************/
@media (max-width: 360px) {
.calendar-section {
padding-right: 12px;
padding-left: 12px;
}
.calendar-section h2 {
font-size: 26px;
}
.scroll-row {
gap: 10px;
}
.calendar-card {
flex-basis: 56%;
}
}
/**********************
便民城市地图
**********************/
.city-map-section{
padding:20px;
}
.city-map-section h2{
display:inline-block;
margin-bottom:0;
}
.subtitle{
display:inline-block;
margin-left:15px;
color:#777;
}
.city-map-card{
height:520px;
border-radius:30px;
overflow:hidden;
position:relative;
background:#eef5ed;
}
/* 地图背景 */
.map-bg{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
opacity:.8;
}
/* 浮动点位按钮 */
.map-point{
position:absolute;
display:flex;
align-items:center;
gap:12px;
background:white;
padding:15px 20px;
border-radius:25px;
text-decoration:none;
color:#555;
box-shadow:
0 5px 20px rgba(0,0,0,.08);
}
.map-point strong{
display:block;
font-size:20px;
}
.map-point small{
display:block;
color:#999;
font-size:14px;
}
.point-icon{
width:35px;
height:35px;
border-radius:10px;
background:#18c4bd;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
}
/* 三个位置 */
.point-book{
top:80px;
left:80px;
}
.point-toilet{
top:160px;
right:40px;
}
.point-info{
top:300px;
left:150px;
}
/****************
底部漫游区域
****************/
.walk-map{
position:absolute;
left:20px;
right:20px;
bottom:20px;
background:#dff4eb;
border-radius:25px;
padding:20px;
}
.walk-title{
display:flex;
justify-content:space-between;
font-size:20px;
color:#4c6075;
margin-bottom:20px;
}
.walk-title a{
color:#13bcb5;
font-size:16px;
text-decoration:none;
}
.walk-scroll{
display:flex;
gap:12px;
overflow-x:auto;
}
.walk-scroll::-webkit-scrollbar{
display:none;
}
.walk-scroll a{
background:white;
border-radius:20px;
overflow:hidden;
min-width:110px;
text-decoration:none;
color:#555;
text-align:center;
}
.walk-scroll img{
width:110px;
height:110px;
object-fit:cover;
}
.walk-scroll span{
display:block;
padding:8px;
font-size:18px;
}
/****************
出片大连
*****************/
.photo-city-section{
padding:20px 14px 28px;
overflow:hidden;
}
/* 标题和换一换 */
.photo-city-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:28px;
padding:0 2px;
}
.photo-city-header h2{
margin:0;
font-size:28px;
line-height:1.2;
color:#333;
}
/* 换一换按钮 */
.photo-refresh{
display:flex;
align-items:center;
gap:5px;
padding:6px 0;
border:0;
background:transparent;
color:#10beb9;
font-size:16px;
font-family:inherit;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.refresh-icon{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:21px;
line-height:1;
transition:transform .45s ease;
}
.photo-refresh:active{
opacity:.65;
}
.photo-refresh.is-loading .refresh-icon{
transform:rotate(360deg);
}
/* 三图叠放区域 */
.photo-stack{
position:relative;
height:240px;
width:100%;
}
/* 通用图片卡片 */
.photo-card{
position:absolute;
display:block;
overflow:hidden;
border-radius:22px;
background:#eee;
box-shadow:
0 12px 28px rgba(0,0,0,.14);
text-decoration:none;
-webkit-tap-highlight-color:transparent;
transition:
transform .28s ease,
opacity .28s ease;
}
.photo-card:active{
opacity:.88;
}
/* 卡片图片 */
.photo-card img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
/* 左侧卡片 */
.photo-card-left{
left:0;
top:18px;
width:34%;
height:190px;
transform:rotate(-5deg);
z-index:1;
}
.photo-card-left:active{
transform:rotate(-5deg) scale(.97);
}
/* 中间主卡片 */
.photo-card-center{
left:50%;
top:0;
width:42%;
height:220px;
transform:translateX(-50%);
z-index:3;
}
.photo-card-center:active{
transform:translateX(-50%) scale(.97);
}
/* 右侧卡片 */
.photo-card-right{
right:0;
top:18px;
width:34%;
height:190px;
transform:rotate(5deg);
z-index:1;
}
.photo-card-right:active{
transform:rotate(5deg) scale(.97);
}
/* 主图底部文字 */
.photo-card-title{
position:absolute;
left:0;
right:0;
bottom:0;
padding:32px 10px 14px;
background:
linear-gradient(
to bottom,
rgba(0,0,0,0),
rgba(0,0,0,.68)
);
color:#fff;
font-size:18px;
font-weight:600;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* 下方主题名称 */
.photo-city-name{
margin:8px 0 0;
text-align:center;
font-size:25px;
line-height:1.3;
color:#333;
}
/* 小尺寸手机适配 */
@media(max-width:360px){
.photo-city-section{
padding-left:12px;
padding-right:12px;
}
.photo-stack{
height:218px;
}
.photo-card-left,
.photo-card-right{
height:172px;
}
.photo-card-center{
height:202px;
}
.photo-card-title{
font-size:16px;
}
}
/* 较大手机适配 */
@media(min-width:400px){
.photo-stack{
height:260px;
}
.photo-card-left,
.photo-card-right{
height:205px;
}
.photo-card-center{
height:238px;
}
}
.cards img{
width:180px;
border-radius:25px;
}
.bottom-space{
height:120px;
}
/****************
寻味大连
*****************/
.food-city-section{
padding:24px 14px 30px;
overflow:hidden;
}
/* 标题栏 */
.food-city-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:22px;
padding:0 4px;
}
.food-city-header h2{
margin:0;
font-size:28px;
line-height:1.2;
color:#333;
}
.food-city-header a{
display:flex;
align-items:center;
gap:4px;
color:#444;
font-size:16px;
text-decoration:none;
-webkit-tap-highlight-color:transparent;
}
.food-city-header a span{
font-size:24px;
line-height:1;
}
/****************
美食分类
*****************/
.food-category-scroll{
display:flex;
gap:18px;
overflow-x:auto;
padding:4px 6px 22px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;
}
.food-category-scroll::-webkit-scrollbar{
display:none;
}
.food-category-item {
flex: 0 0 auto;
width: 96px;
padding: 0;
border: 0;
background: transparent;
color: #555;
font-family: inherit;
text-decoration: none;
cursor: pointer;
scroll-snap-align: start;
-webkit-tap-highlight-color: transparent;
transition:
transform 0.18s ease,
opacity 0.18s ease;
}
.food-category-item:active {
opacity: 0.82;
transform: scale(0.96);
}
/************************
寻味大连分类选中状态
************************/
.food-category-item.is-active
.food-category-card {
border:
2px solid
#f2b942;
box-shadow:
0 9px 23px
rgba(225, 168, 45, 0.22);
transform:
translateY(-3px);
}
.food-category-item.is-active
.food-category-card::before {
content: "✓";
position: absolute;
top: 5px;
right: 7px;
z-index: 3;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f3b83b;
color: #fff;
font-size: 12px;
font-weight: 700;
box-shadow:
0 4px 10px
rgba(205, 143, 18, 0.24);
}
.food-category-card {
transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.food-category-card{
position:relative;
height:126px;
padding-top:54px;
border-radius:28px 28px 28px 28px;
background:linear-gradient(
180deg,
#fff7cf 0%,
#ffefb4 100%
);
text-align:center;
}
/* 分类顶部圆形图片 */
.food-category-card img{
position:absolute;
top:-2px;
left:50%;
transform:translateX(-50%);
width:82px;
height:82px;
object-fit:cover;
border-radius:50%;
border:2px solid #f4cd67;
background:#eee;
}
/* 分类文字 */
.food-category-card span{
display:flex;
align-items:center;
justify-content:center;
height:68px;
padding:16px 5px 10px;
font-size:16px;
white-space:nowrap;
}
/* 下方小尖角 */
.food-category-card::after{
content:"";
position:absolute;
left:50%;
bottom:-10px;
width:20px;
height:20px;
background:#ffefb4;
transform:
translateX(-50%)
rotate(45deg);
border-radius:2px;
z-index:-1;
}
/****************
餐厅卡片横向滑动
*****************/
.restaurant-scroll{
display:flex;
gap:14px;
overflow-x:auto;
padding:10px 4px 18px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
}
.restaurant-scroll::-webkit-scrollbar{
display:none;
}
.restaurant-card{
flex:0 0 92%;
min-width:0;
height:150px;
display:flex;
align-items:center;
gap:16px;
padding:14px;
border-radius:24px;
background:#fff;
box-shadow:
0 6px 24px rgba(0,0,0,.08);
text-decoration:none;
color:#333;
scroll-snap-align:start;
-webkit-tap-highlight-color:transparent;
transition:
transform .18s ease,
opacity .18s ease;
}
.restaurant-card:active{
transform:scale(.985);
opacity:.9;
}
.restaurant-card > img{
flex:0 0 auto;
width:112px;
height:112px;
object-fit:cover;
border-radius:18px;
background:#eee;
}
.restaurant-info{
min-width:0;
flex:1;
display:flex;
flex-direction:column;
align-self:stretch;
padding:4px 0;
}
.restaurant-info strong{
font-size:20px;
line-height:1.3;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.restaurant-info p{
margin:8px 0 0;
font-size:15px;
color:#444;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.restaurant-info small{
margin-top:auto;
font-size:14px;
color:#aaa;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/****************
AI美食推荐横幅
*****************/
.food-ai-banner{
display:flex;
align-items:center;
gap:12px;
margin:18px 4px 0;
padding:12px 14px;
min-height:78px;
border-radius:30px;
background:
linear-gradient(
105deg,
#eff4ff 0%,
#dceeff 48%,
#eaf8ff 100%
);
text-decoration:none;
color:#333;
-webkit-tap-highlight-color:transparent;
transition:
transform .18s ease,
opacity .18s ease;
}
.food-ai-banner:active{
transform:scale(.985);
opacity:.9;
}
.food-ai-banner > img{
flex:0 0 auto;
width:54px;
height:54px;
border-radius:50%;
object-fit:cover;
background:#fff;
}
.food-ai-content{
min-width:0;
flex:1;
display:flex;
flex-direction:column;
gap:5px;
}
.food-ai-content strong{
font-size:17px;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.food-ai-content span{
font-size:15px;
color:#8096ce;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.food-ai-arrow{
flex:0 0 auto;
width:46px;
height:46px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.75);
font-size:26px;
color:#333;
}
/****************
小屏幕适配
*****************/
@media(max-width:360px){
.food-city-section{
padding-left:12px;
padding-right:12px;
}
.food-category-scroll{
gap:14px;
}
.food-category-item{
width:88px;
}
.food-category-card{
height:118px;
}
.food-category-card img{
width:74px;
height:74px;
}
.restaurant-card{
flex-basis:94%;
height:140px;
padding:12px;
gap:12px;
}
.restaurant-card > img{
width:100px;
height:100px;
}
.food-ai-content strong{
font-size:16px;
}
.food-ai-content span{
font-size:13px;
}
}
/****************
大连扫街榜
*****************/
.ranking-section{
padding:24px 14px 32px;
overflow:hidden;
}
/* 标题 */
.ranking-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:20px;
padding:0 2px;
}
.ranking-header h2{
margin:0;
font-size:28px;
line-height:1.2;
color:#333;
}
/****************
排行榜横向滑动
*****************/
.ranking-scroll{
display:flex;
gap:16px;
overflow-x:auto;
padding:4px 2px 18px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
}
.ranking-scroll::-webkit-scrollbar{
display:none;
}
/****************
单组排行榜
*****************/
.ranking-card{
flex:0 0 88%;
min-width:0;
padding:22px 16px 18px;
border-radius:28px;
background:
linear-gradient(
145deg,
#edf8ff 0%,
#dff1fb 100%
);
scroll-snap-align:start;
}
/* 不同排行榜颜色 */
.ranking-card.theme-blue{
background:
linear-gradient(
145deg,
#edf8ff 0%,
#dceef9 100%
);
}
.ranking-card.theme-pink{
background:
linear-gradient(
145deg,
#fff2ee 0%,
#fbe2db 100%
);
}
.ranking-card.theme-yellow{
background:
linear-gradient(
145deg,
#fff9df 0%,
#f9edbd 100%
);
}
.ranking-card.theme-green{
background:
linear-gradient(
145deg,
#eff9ed 0%,
#dff0dc 100%
);
}
.ranking-card.theme-purple{
background:
linear-gradient(
145deg,
#f6f0ff 0%,
#e8ddfa 100%
);
}
/****************
排行榜标题
*****************/
.ranking-card-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}
.ranking-card-header h3{
margin:0;
min-width:0;
font-size:25px;
line-height:1.25;
color:#333;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ranking-more{
flex:0 0 auto;
display:flex;
align-items:center;
gap:4px;
color:#666;
font-size:15px;
text-decoration:none;
-webkit-tap-highlight-color:transparent;
}
.ranking-more span{
font-size:20px;
line-height:1;
}
/****************
排行榜列表
*****************/
.ranking-list{
display:flex;
flex-direction:column;
gap:12px;
}
/* 每一行都是链接 */
.ranking-item{
display:grid;
grid-template-columns:
32px
62px
minmax(0, 1fr);
align-items:center;
gap:12px;
min-height:64px;
text-decoration:none;
color:#333;
border-radius:16px;
-webkit-tap-highlight-color:transparent;
transition:
background .18s ease,
transform .18s ease,
opacity .18s ease;
}
.ranking-item:active{
background:rgba(255,255,255,.55);
transform:scale(.99);
opacity:.9;
}
/* 排名数字 */
.ranking-number{
display:flex;
align-items:center;
justify-content:center;
font-size:23px;
line-height:1;
color:#333;
}
/* 前三名突出 */
.ranking-item:nth-child(1)
.ranking-number{
font-weight:700;
}
.ranking-item:nth-child(2)
.ranking-number{
font-weight:700;
}
.ranking-item:nth-child(3)
.ranking-number{
font-weight:700;
}
/* 排行图片 */
.ranking-image{
display:block;
width:62px;
height:62px;
object-fit:cover;
border-radius:8px;
background:#eee;
}
/* 信息区 */
.ranking-info{
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
gap:7px;
}
.ranking-name{
font-size:17px;
line-height:1.25;
font-weight:500;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ranking-meta{
font-size:14px;
line-height:1.2;
color:#777;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/****************
小屏幕适配
*****************/
@media(max-width:360px){
.ranking-section{
padding-left:12px;
padding-right:12px;
}
.ranking-card{
flex-basis:92%;
padding-left:14px;
padding-right:14px;
}
.ranking-card-header h3{
font-size:22px;
}
.ranking-item{
grid-template-columns:
28px
56px
minmax(0, 1fr);
gap:10px;
}
.ranking-image{
width:56px;
height:56px;
}
.ranking-name{
font-size:16px;
}
.ranking-meta{
font-size:13px;
}
}
/****************
较大手机适配
*****************/
@media(min-width:400px){
.ranking-card{
flex-basis:84%;
}
}
/****************
底部导航
*****************/
.tab-bar{
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%);
width:100%;
max-width:430px;
height:82px;
background:
rgba(255,255,255,.96);
border-radius:22px 22px 0 0;
display:flex;
justify-content:space-around;
align-items:center;
z-index:999;
padding-bottom:
env(safe-area-inset-bottom);
box-shadow:
0 -5px 20px
rgba(45,65,73,.11);
}
.tab-bar a{
display:flex;
flex-direction:column;
align-items:center;
gap:3px;
text-decoration:none;
color:#687b86;
font-size:11px;
text-align:center;
}
.tab-bar a.is-current{
color:#10aaa5;
font-weight:700;
}
.tab-bar div{
height:27px;
font-size:23px;
line-height:24px;
}
.ai-icon{
width:42px;
height:42px;
border-radius:50%;
background:#15c6c9;
color:white;
display:flex;
align-items:center;
justify-content:center;
margin-top:-16px;
font-size:14px;
font-weight:700;
box-shadow:
0 5px 13px
rgba(21,198,201,.28);
}
@media(max-width:350px){
.tab-bar span{
font-size:10px;
}
}
/***********************
大连印记
***********************/
.memory-section{
padding:28px 0 38px;
overflow:hidden;
}
/* 顶部标题 */
.memory-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px;
margin-bottom:20px;
}
.memory-header h2{
margin:0;
font-size:28px;
line-height:1.2;
font-weight:700;
color:#333;
}
.memory-header a{
display:flex;
align-items:center;
gap:3px;
font-size:16px;
line-height:1;
color:#555;
text-decoration:none;
-webkit-tap-highlight-color:transparent;
}
.memory-header a span{
font-size:25px;
line-height:1;
}
/***********************
叠放图片容器
***********************/
.memory-slider{
--memory-left:18px;
--memory-card-width:72%;
--memory-card-height:430px;
--memory-peek-gap:22px;
position:relative;
width:100%;
height:450px;
overflow:hidden;
touch-action:pan-y;
user-select:none;
-webkit-user-select:none;
}
/***********************
每张图片卡片
***********************/
.memory-slide{
position:absolute;
top:0;
left:var(--memory-left);
width:var(--memory-card-width);
height:var(--memory-card-height);
display:block;
overflow:hidden;
border-radius:18px;
background:#eee;
box-shadow:
0 10px 28px rgba(0,0,0,.13);
text-decoration:none;
color:#fff;
transform-origin:center;
will-change:
transform,
opacity;
transition:
transform .42s cubic-bezier(.22,.72,.22,1),
opacity .32s ease;
-webkit-tap-highlight-color:transparent;
/* 修改这里 */
pointer-events:auto;
z-index:1;
}
/* 图片 */
.memory-slide img{
display:block;
width:100%;
height:100%;
object-fit:cover;
pointer-events:none;
}
/* 图片底部渐变 */
.memory-slide::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:32%;
background:
linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,.16) 38%,
rgba(0,0,0,.7) 100%
);
pointer-events:none;
}
/* 图片标题 */
.memory-slide-title{
position:absolute;
left:18px;
right:18px;
bottom:18px;
z-index:2;
font-size:20px;
font-weight:700;
line-height:1.25;
color:#fff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
pointer-events:none;
}
/* 手指拖动时取消过渡 */
.memory-slide.is-dragging{
transition:none;
}
/* 点击反馈 */
.memory-slide:active{
opacity:.94;
}
/***********************
小屏幕适配
***********************/
@media(max-width:360px){
.memory-header{
padding-left:14px;
padding-right:14px;
}
.memory-header h2{
font-size:26px;
}
.memory-slider{
--memory-left:14px;
--memory-card-width:73%;
--memory-card-height:370px;
--memory-peek-gap:18px;
height:390px;
}
.memory-slide{
border-radius:16px;
}
.memory-slide-title{
left:15px;
right:15px;
bottom:15px;
font-size:18px;
}
}
/***********************
较大手机适配
***********************/
@media(min-width:400px){
.memory-slider{
--memory-left:14px;
/*
主图宽度。
留出右侧空间显示后面的卡片。
*/
--memory-card-width:72%;
--memory-card-height:430px;
/*
每张后方卡片向右错开的距离。
参考图建议 22px～28px。
*/
--memory-peek-gap:24px;
position:relative;
width:100%;
height:450px;
overflow:hidden;
touch-action:pan-y;
user-select:none;
-webkit-user-select:none;
}
}
/****************
行程定制
*****************/
.trip-custom-section{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
min-height:190px;
margin:24px 14px 30px;
padding:28px 20px;
overflow:hidden;
border-radius:26px;
background:#f4f7f8;
}
/* 左侧内容 */
.trip-custom-content{
position:relative;
z-index:3;
width:56%;
}
.trip-custom-content h2{
margin:0;
font-size:27px;
line-height:1.25;
font-weight:600;
color:#50617a;
}
.trip-custom-content p{
margin:12px 0 20px;
font-size:17px;
line-height:1.45;
font-weight:500;
color:#aaa;
}
/* 立即定制按钮 */
.trip-custom-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-width:140px;
height:48px;
padding:0 20px;
border:1.5px solid #12c4bf;
border-radius:24px;
background:rgba(255,255,255,.72);
color:#12bdb8;
font-size:17px;
text-decoration:none;
white-space:nowrap;
-webkit-tap-highlight-color:transparent;
transition:
transform .18s ease,
background .18s ease,
opacity .18s ease;
}
.trip-custom-button:active{
transform:scale(.97);
background:#fff;
opacity:.86;
}
.trip-custom-button-icon{
font-size:24px;
line-height:1;
}
/* 右侧叠放图片 */
.trip-custom-images{
position:relative;
flex:0 0 42%;
height:140px;
}
.trip-custom-image{
position:absolute;
top:50%;
left:50%;
width:92px;
height:125px;
object-fit:cover;
border-radius:20px;
box-shadow:
0 8px 20px rgba(0,0,0,.12);
transform-origin:center;
}
/* 后层 */
.image-back{
z-index:1;
transform:
translate(-20%, -50%)
rotate(10deg);
}
/* 中层 */
.image-middle{
z-index:2;
transform:
translate(-47%, -50%)
rotate(3deg);
}
/* 前层 */
.image-front{
z-index:3;
transform:
translate(-75%, -50%)
rotate(-8deg);
}
/****************
小屏幕适配
*****************/
@media(max-width:360px){
.trip-custom-section{
min-height:176px;
margin-left:12px;
margin-right:12px;
padding:
24px
16px;
}
.trip-custom-content{
width:58%;
}
.trip-custom-content h2{
font-size:24px;
}
.trip-custom-content p{
font-size:15px;
margin-bottom:16px;
}
.trip-custom-button{
min-width:126px;
height:44px;
padding:0 16px;
font-size:16px;
}
.trip-custom-images{
flex-basis:40%;
height:125px;
}
.trip-custom-image{
width:78px;
height:108px;
border-radius:17px;
}
}
/****************
较大手机适配
*****************/
@media(min-width:400px){
.trip-custom-section{
min-height:200px;
padding:
30px
22px;
}
.trip-custom-image{
width:98px;
height:134px;
}
}
/***********************
玩转大连
***********************/
.explore-section {
padding: 26px 14px 36px;
overflow: hidden;
}
/***********************
标题区域
***********************/
.explore-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
padding: 0 2px;
}
.explore-header h2 {
margin: 0;
font-size: 28px;
line-height: 1.2;
font-weight: 700;
color: #333;
}
.explore-header a {
display: flex;
align-items: center;
gap: 3px;
color: #555;
font-size: 15px;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.explore-header a:link,
.explore-header a:visited,
.explore-header a:hover,
.explore-header a:active {
color: #555;
text-decoration: none;
}
.explore-header a span {
font-size: 24px;
line-height: 1;
}
/***********************
分类标签
***********************/
.explore-tabs {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 4px 2px 18px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.explore-tabs::-webkit-scrollbar {
display: none;
}
.explore-tab {
flex: 0 0 auto;
min-width: 78px;
height: 42px;
padding: 0 18px;
border: 1px solid transparent;
border-radius: 22px;
background: #fff;
box-shadow:
0 5px 16px rgba(0, 0, 0, 0.07);
color: #333;
font-family: inherit;
font-size: 16px;
line-height: 1;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
border-color 0.2s ease,
color 0.2s ease,
background 0.2s ease,
transform 0.18s ease;
}
.explore-tab:active {
transform: scale(0.96);
}
.explore-tab.is-active {
border-color: #12c5bf;
background: #f5ffff;
color: #333;
}
/***********************
双列瀑布流
***********************/
.explore-grid {
column-count: 2;
column-gap: 12px;
}
/***********************
内容卡片
***********************/
.explore-card {
display: inline-block;
width: 100%;
margin: 0 0 18px;
break-inside: avoid;
page-break-inside: avoid;
vertical-align: top;
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.explore-card.is-hidden {
display: none;
}
/***********************
图片或视频封面容器
***********************/
.explore-media {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border-radius: 14px;
background: #eee;
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.explore-media:link,
.explore-media:visited,
.explore-media:hover,
.explore-media:active {
color: inherit;
text-decoration: none;
}
.explore-media > img {
display: block;
width: 100%;
height: 100%;
min-height: 180px;
object-fit: cover;
}
/***********************
不同卡片高度
形成瀑布流
***********************/
.explore-card:nth-child(1) .explore-media {
height: 260px;
}
.explore-card:nth-child(2) .explore-media {
height: 260px;
}
.explore-card:nth-child(3) .explore-media {
height: 300px;
}
.explore-card:nth-child(4) .explore-media {
height: 300px;
}
.explore-card:nth-child(5) .explore-media {
height: 230px;
}
.explore-card:nth-child(6) .explore-media {
height: 245px;
}
/***********************
视频跳转卡片
***********************/
.explore-video-link {
position: relative;
display: block;
cursor: pointer;
}
.explore-video-link > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.explore-video-link:active {
opacity: 0.9;
}
/***********************
视频播放按钮
***********************/
.explore-play-button {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding-left: 3px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.52);
color: #fff;
font-size: 20px;
line-height: 1;
transform: translate(-50%, -50%);
pointer-events: none;
transition:
transform 0.18s ease,
opacity 0.18s ease;
}
.explore-video-link:active .explore-play-button {
transform:
translate(-50%, -50%)
scale(0.92);
}
/***********************
内容标签
***********************/
.explore-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 5;
padding: 4px 9px;
border-radius: 5px;
background: rgba(245, 231, 178, 0.92);
color: #333;
font-size: 13px;
line-height: 1;
pointer-events: none;
}
/* 右上角“攻略”标签 */
.explore-badge-right {
top: 0;
right: 0;
left: auto;
padding: 9px 14px;
border-radius:
0
14px
0
14px;
background: rgba(73, 80, 81, 0.72);
color: #fff;
}
/***********************
文章标题
***********************/
.explore-card-title {
display: block;
margin-top: 9px;
max-height: 45.44px;
overflow: hidden;
color: #333;
font-size: 16px;
line-height: 1.42;
font-weight: 600;
text-decoration: none;
word-break: break-word;
-webkit-tap-highlight-color: transparent;
}
.explore-card-title:link,
.explore-card-title:visited,
.explore-card-title:hover,
.explore-card-title:active {
color: #333;
text-decoration: none;
}
/***********************
内容来源
***********************/
.explore-source {
margin: 7px 0 0;
color: #999;
font-size: 13px;
line-height: 1.4;
}
/***********************
点击反馈
***********************/
.explore-media:active {
opacity: 0.92;
}
/***********************
小屏幕适配
***********************/
@media (max-width: 360px) {
.explore-section {
padding-right: 12px;
padding-left: 12px;
}
.explore-header h2 {
font-size: 26px;
}
.explore-header a {
font-size: 14px;
}
.explore-tabs {
gap: 8px;
}
.explore-tab {
min-width: 72px;
height: 40px;
padding: 0 15px;
font-size: 15px;
}
.explore-grid {
column-gap: 10px;
}
.explore-card {
margin-bottom: 15px;
}
.explore-card-title {
max-height: 42.6px;
font-size: 15px;
}
.explore-play-button {
width: 44px;
height: 44px;
font-size: 18px;
}
}
/***********************
较宽手机适配
***********************/
@media (min-width: 400px) {
.explore-grid {
column-gap: 14px;
}
.explore-card-title {
max-height: 48.28px;
font-size: 17px;
}
}