排版功能調整
This commit is contained in:
@@ -298,7 +298,7 @@ public class StyleDataAccess
|
||||
sb.Append("CUser=@CUser,CDate=@CDate,CTime=@CTime,UUser=@UUSer,UDate=@UDate,UTime=@UTime ");
|
||||
sb.Append("where StyleID=@StyleID ");
|
||||
|
||||
context.Database.ExecuteSqlCommand(sb.ToString(), sp);
|
||||
context.Database.ExecuteSqlCommand(sb.ToString(), sp.ToArray());
|
||||
|
||||
sb.Clear();
|
||||
sb.Append("update TabletStyleDetail set Descr=@Descr,StartX=@StartX,StartY=@StartY,FontSize=@FontSize,BreakLen=@BreakLen,");
|
||||
@@ -336,7 +336,7 @@ public class StyleDataAccess
|
||||
new SqlParameter("@UDate",""),
|
||||
new SqlParameter("@UTime",""),
|
||||
};
|
||||
context.Database.ExecuteSqlCommand(sb.ToString(), sp1);
|
||||
context.Database.ExecuteSqlCommand(sb.ToString(), sp1.ToArray());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -162,6 +162,7 @@ public class designerController : ApiController
|
||||
ts.Orientation = (json == null || json.orientation == null) ? "" : (string)json.orientation;
|
||||
ts.PrintPageCount = (json == null || json.printPageCount == null) ? "" : (string)json.printPageCount;
|
||||
ts.PrintMode = (json == null || json.printMode == null) ? "" : (string)json.printMode;
|
||||
ts.RosterLimit = (json == null || json.rosterLimit == null) ? "" : (string)json.rosterLimit;
|
||||
foreach (var item in json.detail.Children<JObject>())
|
||||
{
|
||||
TabletStyleDetail tsd = new TabletStyleDetail();
|
||||
|
||||
@@ -273,7 +273,95 @@
|
||||
|
||||
<style>
|
||||
|
||||
/* 名單金字塔佈局容器 */
|
||||
.roster-container {
|
||||
width: 100%; height: 100%;
|
||||
writing-mode: vertical-rl; /* 直書 */
|
||||
display: flex;
|
||||
/*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
|
||||
flex-direction: row; /* 上下分層 (Top / Bottom) */
|
||||
align-items: center; /* 左右置中對齊 */
|
||||
justify-content: center;
|
||||
gap: 20px; /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
|
||||
}
|
||||
|
||||
.roster-row {
|
||||
display: flex;
|
||||
flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
|
||||
justify-content: center;
|
||||
gap: 8px; /* 名字之間的間距 */
|
||||
margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
|
||||
}
|
||||
|
||||
.name-group {
|
||||
display: flex;
|
||||
flex-direction: column; /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* gap 由 HTML 動態綁定 */
|
||||
}
|
||||
|
||||
.roster-name {
|
||||
text-orientation: upright;
|
||||
/*font-weight: bold;*/
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
font-family: 'Kaiti', serif;
|
||||
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
|
||||
width: fit-content;
|
||||
}
|
||||
.vertical-text {
|
||||
writing-mode: vertical-rl !important;
|
||||
-webkit-writing-mode: vertical-rl !important;
|
||||
text-orientation: mixed !important;
|
||||
}
|
||||
|
||||
/* 【修復底圖沒出現】強制印出背景設定 */
|
||||
* {
|
||||
-webkit-print-color-adjust: exact !important;
|
||||
print-color-adjust: exact !important;
|
||||
color-adjust: exact !important;
|
||||
}
|
||||
|
||||
|
||||
/* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
|
||||
.tablet-paper {
|
||||
position: relative !important;
|
||||
margin: 0 auto !important;
|
||||
page-break-after: always !important;
|
||||
box-shadow: none !important;
|
||||
width: var(--page-w);
|
||||
height: var(--page-h);
|
||||
}
|
||||
|
||||
.tablet-element {
|
||||
position: absolute !important; /* 絕對不能被 Bootstrap 覆蓋為 static */
|
||||
color: black !important; /* 確保文字是黑色的 */
|
||||
}
|
||||
|
||||
|
||||
.ancestor-wrapper {
|
||||
/* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
|
||||
writing-mode: horizontal-tb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* 水平置中 */
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.main-name {
|
||||
line-height: 1.2;
|
||||
/* 保持大字 */
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 0.6em; /* 縮小字體 */
|
||||
line-height: 1.2;
|
||||
margin-top: 4px; /* 與上方林張的間距 */
|
||||
white-space: nowrap; /* 避免自動換行 */
|
||||
writing-mode:vertical-rl
|
||||
}
|
||||
|
||||
/* 列印時的紙張大小與頁面歸零 */
|
||||
@media print {
|
||||
@@ -693,9 +781,10 @@
|
||||
const bot = names.slice(mid);
|
||||
const size = this.autoScale(names, el.fontSize);
|
||||
|
||||
|
||||
let h = $(`<div class=""></div>`).css(
|
||||
{
|
||||
width: "100%", height: "600px",
|
||||
width: el.width, height: el.height,
|
||||
"writing-mode": "vertical-rl", /* 直書 */
|
||||
display: "flex",
|
||||
"flex-direction": "row", /* 上下分層 (Top / Bottom) */
|
||||
@@ -710,19 +799,19 @@
|
||||
//h += `<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
|
||||
///if (bot.length) h += `<div class="name-group">${bot.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
|
||||
//return h + `</div>`;
|
||||
h.append(this.renderNameGroups(top));
|
||||
if (bot.length) h.append(this.renderNameGroups(bot));
|
||||
h.append(this.renderNameGroups(top,el));
|
||||
if (bot.length) h.append(this.renderNameGroups(bot,el));
|
||||
return h
|
||||
},
|
||||
renderNameGroups(items) {
|
||||
renderNameGroups(items,el) {
|
||||
let g = $(`<div ></div>`).css({
|
||||
"display": "flex",
|
||||
"flex-direction": "column",
|
||||
"justify-content": "center",
|
||||
"height": "200px",
|
||||
"height": el.textHeight,
|
||||
})
|
||||
items.forEach(x => {
|
||||
g.append($(`<div class="" style="font-size:20pt;letter-spacing: 10px;">${x}</div>`))
|
||||
g.append($(`<div class="" style="font-size:${el.style.fontSize}pt;letter-spacing: 10px;">${x}</div>`))
|
||||
})
|
||||
return g;
|
||||
},
|
||||
@@ -904,13 +993,13 @@
|
||||
});
|
||||
});
|
||||
let sID = this.styleID
|
||||
if (sID == "A0000") {
|
||||
if (sID == "000001") {
|
||||
this.styleID = ""
|
||||
}
|
||||
let master = {
|
||||
styleID: this.styleID, styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
|
||||
backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),
|
||||
orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: $("rosterLimit").val(),
|
||||
orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: $("#rosterLimit").val(),
|
||||
detail: detail
|
||||
}
|
||||
console.log(master);
|
||||
|
||||
Reference in New Issue
Block a user