Skip to content

G
gk
Commit 590ba752 authored by daniel's avatar daniel
Browse files
Options

refactor(cmpt): 优化赛事详情页面布局 

## 布局调整
1. 微信分享图与"赛事详情tab是否开启"放在同一行
2. "赛事详情样式"独占一整行，支持多个样式选择（参考时间展示样式）
3. 优化微信分享图区块顶部间距

## 文档
- 新增简洁的实施说明文档到 plan 目录
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 79529b95
Hide whitespace changes
Inline Side-by-side
Showing with 40 additions and 41 deletions
src/main/webapp/WEB-INF/views/cmpt/index.jsp
View file @ 590ba752
...@@ -338,47 +338,6 @@ ...@@ -338,47 +338,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row line-first" style="margin-top: 10px;">
<!-- Trending Articles-->
<div class="maincolor">
<div class="articles card">
<div class="card-header d-flex align-items-center">
<h2 class="h3">赛事详情样式</h2>
</div>
<div class="card-body"
style="display: flex;flex-direction: row;align-items: center;gap: 12px;padding: 0px 30px;"
id="style-select">
<img data-style="1"
class="${(cmpt.detailStyle==1||cmpt.detailStyle==null)?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-1.png" />
<img data-style="2"
class="${cmpt.detailStyle==2?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-2.png" />
<img data-style="3"
class="${cmpt.detailStyle==3?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-3.png" />
<img data-style="4"
class="${cmpt.detailStyle==4?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-4.png" />
<img data-style="5"
class="${cmpt.detailStyle==5?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-5.png" />
<img data-style="6"
class="${cmpt.detailStyle==6?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-6.png" />
<input type="hidden" name="detailStyle"
id="detailStyle"
value="${cmpt.detailStyle}" />
</div>
</div>
</div>
<div class="cmptLogo"> <div class="cmptLogo">
<div class="checklist card"> <div class="checklist card">
<div class="card-header d-flex align-items-center"> <div class="card-header d-flex align-items-center">
...@@ -422,6 +381,46 @@ ...@@ -422,6 +381,46 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row line-first" style="margin-top: 10px;">
<div style="width: 100%;">
<div class="articles card">
<div class="card-header d-flex align-items-center">
<h2 class="h3">赛事详情样式</h2>
</div>
<div class="card-body"
style="display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;gap: 12px;padding: 0px 30px;"
id="style-select">
<img data-style="1"
class="${(cmpt.detailStyle==1||cmpt.detailStyle==null)?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-1.png" />
<img data-style="2"
class="${cmpt.detailStyle==2?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-2.png" />
<img data-style="3"
class="${cmpt.detailStyle==3?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-3.png" />
<img data-style="4"
class="${cmpt.detailStyle==4?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-4.png" />
<img data-style="5"
class="${cmpt.detailStyle==5?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-5.png" />
<img data-style="6"
class="${cmpt.detailStyle==6?'active-style':''}"
style="width: 80px;height:134px;box-sizing: border-box;"
src="https://geexekimgoss-sxk.oss-cn-hangzhou.aliyuncs.com/gk/common/detail-style/style-6.png" />
<input type="hidden" name="detailStyle"
id="detailStyle"
value="${cmpt.detailStyle}" />
</div>
</div>
</div>
</div>
<div class="row line-first" style="margin-top: 10px;"> <div class="row line-first" style="margin-top: 10px;">
<div style="width: 100%;"> <div style="width: 100%;">
<div class="articles card"> <div class="articles card">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment