From af31f794a24fce3448fd096b61a4d6e011ff59b9 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期三, 22 五月 2024 16:29:50 +0800 Subject: [PATCH] 样式优化 --- src/books/embedded/view/components/chapter001.vue | 354 +++++++++++++++++++++++++++++-------------------- src/assets/js/config.js | 2 src/books/embedded/assets/main.less | 18 +- src/books/embedded/view/components/header.vue | 4 4 files changed, 223 insertions(+), 155 deletions(-) diff --git a/src/assets/js/config.js b/src/assets/js/config.js index 791bda3..942c8a8 100644 --- a/src/assets/js/config.js +++ b/src/assets/js/config.js @@ -1,5 +1,5 @@ import axios from "axios"; -export const resourceCtx = "http://182.92.203.7:3007/books/resource/1"; // 璧勬簮璇锋眰鍦板潃 +export const resourceCtx = "http://182.92.203.7:3007/books/resource/3"; // 璧勬簮璇锋眰鍦板潃 export let activeBook = {}; // 璧勬簮璇锋眰鍦板潃 export let goodsStore = ""; // 璇锋眰鏁欐潗閰嶇疆淇℃伅 diff --git a/src/books/embedded/assets/main.less b/src/books/embedded/assets/main.less index 7cbc7d5..7de7406 100644 --- a/src/books/embedded/assets/main.less +++ b/src/books/embedded/assets/main.less @@ -634,6 +634,9 @@ .t0 { text-indent: 0; } + .t2 { + text-indent: 2em; + } .primary-color { color: #501438; } @@ -719,13 +722,16 @@ border: 0; border-bottom: 1px solid #000; } - .input-border:focus { + .border-0 { + border: 0; + } + .input-border:focus,.border-0:focus{ outline: none; } .textarea-table-td { - font-size: 16px; + font-size: 14px; width: 60px; - height: 70px; + height: 60px; border: 0; font-family: "Microsoft YaHei", "寰蒋闆呴粦", sans-serif; } @@ -791,10 +797,8 @@ .tl-cn { text-align: center; } - .cover-box { - width: 815px; - height: 1125px; - object-fit: contain; + table { + font-size: 14px; } } body { diff --git a/src/books/embedded/view/components/chapter001.vue b/src/books/embedded/view/components/chapter001.vue index a791996..ec02cff 100644 --- a/src/books/embedded/view/components/chapter001.vue +++ b/src/books/embedded/view/components/chapter001.vue @@ -1,7 +1,11 @@ <template> <div class="chapter" num="1"> <!-- 1 --> - <div class="page-box fl fl-cl ju-bt al-end padding-96" page="11"> + <div + class="page-box fl fl-cl ju-bt al-end" + page="11" + style="padding: 0 87px 0 88px" + > <div class="mt-100 w100"> <!-- <h1>椤圭洰涓�銆�瑙︽懜灞忕粍鎬佷粙缁�</h1> --> <img src="../../assets/images/project-one.png" alt="" class="w100" /> @@ -47,7 +51,7 @@ CE锛孡inux鍜孌OS涔嬩笂锛岀敋鑷崇洿鎺ユ敮鎸佺壒瀹氱殑CPU銆傚祵鍏ュ紡绯荤粺鍏锋湁涓嶱C鍑犱箮涓�鏍风殑鍔熻兘锛屼笌PC鐨勫尯鍒粎浠呮槸灏嗗井鍨嬫搷浣滅郴缁熶笌搴旂敤杞欢宓屽叆鍦≧OM銆丷AM涓嶧lash瀛樺偍鍣ㄤ腑锛岃�屼笉鏄瓨鍌ㄤ簬纾佺洏绛夎浇浣撲腑銆� </p> <p class="content"> - 闅忕潃鍚嶱C鏃朵唬鐨勫埌鏉ワ紝鍦ㄥ埗閫犱笟棰嗗煙鏇存敞閲嶄娇鐢ㄧ鍚堝叾鐗瑰畾闇�姹傚苟甯︽湁鏅鸿兘鐨勫祵鍏ュ紡宸ヤ笟鎺у埗缁勬�佽蒋浠讹紝鑰屽祵鍏ュ紡缁勬�佽蒋浠剁壒鍏风殑鎸夊姛鑳藉壀瑁佺殑鐗规�э紝浠ュ強鍏跺唴宓岀殑瀹炴椂澶氫换鍔℃搷浣滅郴缁燂紝鍙繚璇佹暣涓祵鍏ョ郴缁熶綋绉皬銆佹垚鏈綆銆佸疄鏃舵�ч珮銆佸彲闈犳�ч珮鐨勫悓鏃讹紝杩樻柟渚夸笉鍏峰宓屽叆寮忚蒋浠跺紑鍙戠粡楠岀殑鐢ㄦ埛鍦ㄦ瀬鐭殑鏃堕棿鍐咃紝浣跨敤宓屽叆寮忕粍鎬佽蒋浠跺揩閫熷紑鍙戝畬鎴愪竴涓祵鍏ュ紡绯荤粺锛屽苟鏋佸ぇ鍦板姞蹇簡宓屽叆寮忎骇鍝佽繘鍏ュ競鍦虹殑閫熷害锛岃�屼笖浣夸骇鍝佸叿鏈変赴瀵岀殑浜烘満鐣岄潰銆傚寳浜槅浠戦�氭�佸叕鍙窶CGS缁勬�佽蒋浠讹紝閫氳繃澶у姏鍔犲己瀵瑰伐鎺х‖浠朵骇鍝佺殑椹卞姩鏀寔鍜� + 闅忕潃鍚嶱C鏃朵唬鐨勫埌鏉ワ紝鍦ㄥ埗閫犱笟棰嗗煙鏇存敞閲嶄娇鐢ㄧ鍚堝叾鐗瑰畾闇�姹傚苟甯︽湁鏅鸿兘鐨勫祵鍏ュ紡宸ヤ笟鎺у埗缁勬�佽蒋浠讹紝鑰屽祵鍏ュ紡缁勬�佽蒋浠剁壒鍏风殑鎸夊姛鑳藉壀瑁佺殑鐗规�э紝浠ュ強鍏跺唴宓岀殑瀹炴椂澶氫换鍔℃搷浣滅郴缁燂紝鍙繚璇佹暣涓祵鍏ョ郴缁熶綋绉皬銆佹垚鏈綆銆佸疄鏃舵�ч珮銆佸彲闈犳�ч珮鐨勫悓鏃讹紝杩樻柟渚夸笉鍏峰宓屽叆寮忚蒋浠跺紑鍙戠粡楠岀殑鐢ㄦ埛鍦ㄦ瀬鐭殑鏃堕棿鍐咃紝浣跨敤宓屽叆寮忕粍鎬佽蒋浠跺揩閫熷紑鍙戝畬鎴愪竴涓祵鍏ュ紡绯荤粺锛屽苟鏋佸ぇ鍦板姞蹇簡宓屽叆寮忎骇鍝佽繘鍏ュ競鍦虹殑閫熷害锛岃�屼笖浣夸骇鍝佸叿鏈変赴瀵岀殑浜烘満鐣岄潰銆傚寳浜槅浠戦�氭�佸叕鍙窶CGS缁勬�佽蒋浠讹紝閫氳繃澶у姏鍔犲己瀵瑰伐鎺х‖浠朵骇鍝佺殑椹卞姩鏀寔鍜屾彁鍗囪蒋浠跺唴閮ㄥ姛 </p> </div> <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40"> @@ -69,41 +73,56 @@ <span class="primary-color">绱犳潗</span> </li> <li class="fl fl-cl al-cn p-10"> - <img src="../../assets/images/icon/rar.png" class="rar-icon" /> <div> - <span class="rar-text">宸ョ▼鏍蜂緥.rar</span> + <img + src="../../assets/images/icon/rar.png" + class="rar-icon" + /> <img @click="download('宸ョ▼鏍蜂緥')" src="../../assets/images/icon/download.png" class="downlod-icon cu-pr" /> </div> + <div> + <span class="rar-text">宸ョ▼鏍蜂緥.rar</span> + </div> </li> <li class="fl fl-cl al-cn p-10"> - <img src="../../assets/images/icon/rar.png" class="rar-icon" /> <div> - <span class="rar-text">绠℃帶涓�浣撳寲鏍蜂緥.rar</span> + <img + src="../../assets/images/icon/rar.png" + class="rar-icon" + /> <img @click="download('绠℃帶涓�浣撴牱渚�')" src="../../assets/images/icon/download.png" class="downlod-icon cu-pr" /> </div> + <div> + <span class="rar-text">绠℃帶涓�浣撳寲鏍蜂緥.rar</span> + </div> </li> <li class="fl fl-cl al-cn p-10"> - <img src="../../assets/images/icon/rar.png" class="rar-icon" /> <div> - <span class="rar-text">宓宊璁″垝鏇茬嚎鏍蜂緥.rar</span> + <img + src="../../assets/images/icon/rar.png" + class="rar-icon" + /> <img @click="download('宓宊璁″垝鏇茬嚎鏍蜂緥')" src="../../assets/images/icon/download.png" class="downlod-icon cu-pr" /> </div> + <div> + <span class="rar-text">宓宊璁″垝鏇茬嚎鏍蜂緥.rar</span> + </div> </li> </ul> <p class="content t0"> - 鎻愬崌杞欢鍐呴儴鍔熻兘锛屾湁鏁堝府鍔╃敤鎴峰缓閫犱粠宓屽叆寮忚澶囥�佺幇鍦虹洃鎺у伐浣滅珯鍒颁紒涓氱敓浜х洃鎺т俊鎭綉鍦ㄥ唴鐨勫畬鏁寸殑鑷姩鍖栬В鍐虫柟妗堛�傚浘1-1锝炲浘1-4鎵�绀轰负宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬鍚勪釜琛屼笟鐨勬儏鍐点�� + 鑳斤紝鏈夋晥甯姪鐢ㄦ埛寤洪�犱粠宓屽叆寮忚澶囥�佺幇鍦虹洃鎺у伐浣滅珯鍒颁紒涓氱敓浜х洃鎺т俊鎭綉鍦ㄥ唴鐨勫畬鏁寸殑鑷姩鍖栬В鍐虫柟妗堛�傚浘1-1锝炲浘1-4鎵�绀轰负宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬鍚勪釜琛屼笟鐨勬儏鍐点�� </p> <div class="qrbodyPic"> <el-image @@ -134,7 +153,7 @@ </ul> </div> <!-- 3 --> - <div class="page-box fl fl-cl ju-bt al-end padding-96" page="13"> + <div class="page-box fl fl-cl ju-bt al-end " page="13" style="padding:0 86px 0 96px"> <div> <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20"> <img src="../../assets/images/header-one.png" alt="" /> @@ -192,7 +211,7 @@ 锛�1锛変富鎺х獥鍙f瀯閫犱簡搴旂敤绯荤粺鐨勪富妗嗘灦锛岀‘瀹氫簡宸ヤ笟鎺у埗涓伐绋嬩綔涓氱殑鎬讳綋杞粨锛屼互鍙婅繍琛屾祦绋嬨�佺壒鎬у弬鏁板拰鍚姩鐗规�х瓑鍐呭锛屾槸搴旂敤绯荤粺鐨勪富妗嗘灦銆� </p> <p class="content"> - 锛�2锛夎澶囩獥鍙f槸MCGS宓屽叆鐗堢郴缁熶笌澶栧洿璁惧鑱旂郴鐨勫獟浠嬨�傝澶囩獥鍙d笓闂ㄧ敤鏉ユ斁缃� + 锛�2锛夎澶囩獥鍙f槸MCGS宓屽叆鐗堢郴缁熶笌澶栧洿璁惧鑱旂郴鐨勫獟浠嬨�傝澶囩獥鍙d笓闂ㄧ敤鏉ユ斁缃笉鍚� </p> </div> <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40"> @@ -208,7 +227,7 @@ </div> <div class="padding-96"> <p class="content t0"> - 涓嶅悓绫诲瀷鍜屽姛鑳界殑璁惧鏋勪欢锛屽疄鐜板澶栧洿璁惧鐨勬搷浣滃拰鎺у埗銆傝澶囩獥鍙i�氳繃璁惧鏋勪欢鎶婂鍥磋澶囩殑鏁版嵁閲囬泦杩涙潵锛岄�佸叆瀹炴椂鏁版嵁搴擄紝鎴栨妸瀹炴椂鏁版嵁搴撲腑鐨勬暟鎹緭鍑哄埌澶栧洿璁惧銆� + 绫诲瀷鍜屽姛鑳界殑璁惧鏋勪欢锛屽疄鐜板澶栧洿璁惧鐨勬搷浣滃拰鎺у埗銆傝澶囩獥鍙i�氳繃璁惧鏋勪欢鎶婂鍥磋澶囩殑鏁版嵁閲囬泦杩涙潵锛岄�佸叆瀹炴椂鏁版嵁搴擄紝鎴栨妸瀹炴椂鏁版嵁搴撲腑鐨勬暟鎹緭鍑哄埌澶栧洿璁惧銆� </p> <p class="content"> 锛�3锛夌敤鎴风獥鍙e疄鐜颁簡鏁版嵁鍜屾祦绋嬬殑鈥滃彲瑙嗗寲鈥濄�傜敤鎴风獥鍙d腑鍙互鏀剧疆涓夌涓嶅悓绫诲瀷鐨勫浘褰㈠璞★細鍥惧厓銆佸浘绗﹀拰鍔ㄧ敾鏋勪欢銆傞�氳繃鍦ㄧ敤鎴风獥鍙e唴鏀剧疆涓嶅悓鐨勫浘褰㈠璞★紝鐢ㄦ埛鍙互鏋勯�犲悇绉嶅鏉傜殑鍥惧舰鐣岄潰锛岀敤涓嶅悓鐨勬柟寮忓疄鐜版暟鎹拰娴佺▼鐨勨�滃彲瑙嗗寲鈥濄�� @@ -381,13 +400,13 @@ <p class="imgtitle"> 琛�1-1銆�璇勫垎琛� <i class="el-icon-share cu-pr"></i> </p> - <table border="1" cellpadding="10" cellspacing="0"> + <table border="1" cellpadding="4" cellspacing="0"> <tr class="table-bc"> <td class="table-cn" colspan="2"> 璇� 鍒� 琛�<br /> <input style="width: 30px" class="input-border table-bc" /> 瀛﹀勾 </td> - <td class="table-cn"> + <td class="table-cn"> 宸� 浣� 褰� 寮� <br /> <input type="checkbox" name="xingshi" value="prople" /> 涓汉 <input type="checkbox" name="xingshi" value="fengong" /> 灏忕粍鍒嗗伐 @@ -406,10 +425,12 @@ <td class="table-cn">鏁欏笀璇勫垎</td> </tr> <tr> - <td rowspan="4">璁よ瘑宓屽叆寮忕粍鎬佸拰瑙︽懜灞�</td> + <td rowspan="4"><div style="width:50px">璁よ瘑宓屽叆寮忕粍鎬佸拰瑙︽懜灞�</div></td> <td>宓屽叆寮忕粍鎬佸拰瑙︽懜灞忥紝20鍒�</td> <td> - 鏀堕泦鍚勭被瑙︽懜灞忓姛鑳藉強鎬ц兘淇℃伅锛屽苟杩涜姣旇緝;浜嗚В宓屼汉寮忕粍鎬佺粍鎴愶紝浜嗚ВTPC绯诲垪浜у搧鎬ц兘銆佸瑙備笌鎺ョ嚎 + <div > + 鏀堕泦鍚勭被瑙︽懜灞忓姛鑳藉強鎬ц兘淇℃伅锛屽苟杩涜姣旇緝;浜嗚В宓屼汉寮忕粍鎬佺粍鎴愶紝浜嗚ВTPC绯诲垪浜у搧鎬ц兘銆佸瑙備笌鎺ョ嚎 + </div> </td> <td> <textarea class="textarea-table-td"></textarea> @@ -421,7 +442,8 @@ <tr> <td>閫氫俊杩炴帴锛�30鍒�</td> <td> - 瑙傚療鍔ㄦ墜鍒朵綔TPC涓嶱C閫氫俊绾匡紝骞舵祴璇�:瑙傚療鍔ㄦ墜鍒朵綔TPC涓嶱LC閫氫俊绾匡紝骞舵祴璇� + <div>瑙傚療鍔ㄦ墜鍒朵綔TPC涓嶱C閫氫俊绾匡紝骞舵祴璇�;<br/></div> + <div>瑙傚療鍔ㄦ墜鍒朵綔TPC涓嶱LC閫氫俊绾匡紝骞舵祴璇�</div> </td> <td><textarea class="textarea-table-td"></textarea></td> <td><textarea class="textarea-table-td"></textarea></td> @@ -491,12 +513,8 @@ <span class="primary-color">瀹夎鍖�</span> </li> <li class="fl fl-cl al-cn p-10"> - <img src="../../assets/images/icon/rar.png" class="rar-icon" /> <div> - <span class="rar-text" - >MCGS宓屽叆鐗�<br /> - 瀹夎鏂囦欢.rar</span - > + <img src="../../assets/images/icon/rar.png" class="rar-icon" /> <img @click=" downloadRar('McgsPro 3.3.6.6354 SP1.3 缁勬�佽蒋浠跺畨瑁呭寘') @@ -504,6 +522,12 @@ src="../../assets/images/icon/download.png" class="downlod-icon cu-pr" /> + </div> + <div> + <span class="rar-text" + >MCGS宓屽叆鐗�<br /> + 瀹夎鏂囦欢.rar</span + > </div> </li> </ul> @@ -600,13 +624,13 @@ 琛�1-2銆�璇勫垎琛� <i class="el-icon-share cu-pr"></i> </p> </div> - <table border="1" cellpadding="10" cellspacing="0"> + <table border="1" cellpadding="4" cellspacing="0"> <tr class="table-bc"> <td class="table-cn" colspan="2"> 璇� 鍒� 琛�<br /> <input style="width: 30px" class="input-border table-bc" /> 瀛﹀勾 </td> - <td class="table-cn"> + <td class="table-cn"> 宸� 浣� 褰� 寮� <br /> <input type="checkbox" name="xingshi" value="prople" /> 涓汉 <input type="checkbox" name="xingshi" value="fengong" /> 灏忕粍鍒嗗伐 @@ -625,7 +649,7 @@ <td class="table-cn">鏁欏笀璇勫垎</td> </tr> <tr> - <td rowspan="4">MCGS宓屽叆鐗堢粍鎬佽蒋浠跺畨瑁�</td> + <td rowspan="4"><div style="width:50px">MCGS宓屽叆鐗堢粍鎬佽蒋浠跺畨瑁�</div></td> <td>宓屽叆鐗堢粍鎬佽蒋浠跺畨瑁咃紝40鍒�</td> <td> 鎵惧埌浼佷笟缃戠珯锛屼笅杞芥渶鏂癕CGS宓屼汉寮忚蒋浠跺苟瀹夎:鎵惧埌宸ヤ笟鑷姩鍖栬蒋浠禕BS缃戠珯锛屽弬涓庤璁� @@ -661,95 +685,110 @@ </h2> <div class="w100 border-so mb-5"></div> <div class="w50 rw-border mb-20"></div> - <div class="fl ju-bt"> - <div class="left" style="width: 30%"> - <p class="quotation fl al-cn t0 primary-color"> - <img - src="../../assets/images/icon/mubiao.png" - alt="" - class="w-35 mr-5" - /> - <b>浠诲姟鐩爣</b> - </p> - <p class="content">鍒濇浜嗚В宸ョ▼寤虹珛銆佺粍鎬併�佷笅杞戒笌妯℃嫙杩愯銆�</p> - <p class="quotation fl al-cn t0 primary-color"> - <img - src="../../assets/images/icon/miaoshu.png" - alt="" - class="w-35 mr-5" - /> - <b>浠诲姟鎻忚堪</b> - </p> - <p>瑙︽懜灞忔槸鏂颁竴浠i珮绉�</p> + <div style="width:62%"> + <div> + <img + src="../../assets/images/icon/document.png" + class="document-icon" + /> + <span>鏂囨湰</span> </div> - <div class="right" style="width: 69%"> - <div> - <img - src="../../assets/images/icon/document.png" - class="document-icon" - /> - <span>鏂囨湰</span> - </div> - <ul class="word-resource fl"> - <li class="fl fl-cl al-cn"> + <ul class="word-resource fl"> + <li class="fl fl-cl al-cn p08"> + <div> <img src="../../assets/images/icon/word.png" class="word-icon" /> - <div> - <span>鍒濈骇鏁欑▼</span> - <img - @click="downloadWord('鍒濈骇鏁欑▼璧勬簮')" - src="../../assets/images/icon/download.png" - class="downlod-icon cu-pr" - /> - </div> - </li> - <li class="fl fl-cl al-cn"> + <img + @click="downloadWord('鍒濈骇鏁欑▼璧勬簮')" + src="../../assets/images/icon/download.png" + class="downlod-icon cu-pr" + /> + </div> + <div> + <span>鍒濈骇鏁欑▼</span> + </div> + </li> + <li class="fl al-cn"> + <div class="word-border"></div> + </li> + <li class="fl fl-cl al-cn p08"> + <div> <img src="../../assets/images/icon/word.png" class="word-icon" /> - <div> - <span>涓骇鏁欑▼</span> - <img - @click="downloadWord('涓骇鏁欑▼璧勬簮')" - src="../../assets/images/icon/download.png" - class="downlod-icon cu-pr" - /> - </div> - </li> - <li class="fl fl-cl al-cn"> + <img + @click="downloadWord('涓骇鏁欑▼璧勬簮')" + src="../../assets/images/icon/download.png" + class="downlod-icon cu-pr" + /> + </div> + <div> + <span>涓骇鏁欑▼</span> + </div> + </li> + <li class="fl al-cn"> + <div class="word-border"></div> + </li> + <li class="fl fl-cl al-cn p08"> + <div> <img src="../../assets/images/icon/word.png" class="word-icon" /> - <div> - <span>椹卞姩鏁欑▼</span> - <img - @click="downloadWord('椹卞姩鏁欑▼璧勬簮')" - src="../../assets/images/icon/download.png" - class="downlod-icon cu-pr" - /> - </div> - </li> - <li class="fl fl-cl al-cn"> + <img + @click="downloadWord('椹卞姩鏁欑▼璧勬簮')" + src="../../assets/images/icon/download.png" + class="downlod-icon cu-pr" + /> + </div> + + <div> + <span>椹卞姩鏁欑▼</span> + </div> + </li> + <li class="fl al-cn"> + <div class="word-border"></div> + </li> + <li class="fl fl-cl al-cn p08"> + <div> <img src="../../assets/images/icon/word.png" class="word-icon" /> - <div> - <span>纭欢鏁欑▼</span> - <img - @click="downloadWord('纭欢鏁欑▼璧勬簮')" - src="../../assets/images/icon/download.png" - class="downlod-icon cu-pr" - /> - </div> - </li> - </ul> - </div> + <img + @click="downloadWord('纭欢鏁欑▼璧勬簮')" + src="../../assets/images/icon/download.png" + class="downlod-icon cu-pr" + /> + </div> + + <div> + <span>纭欢鏁欑▼</span> + </div> + </li> + </ul> </div> + <p class="quotation fl al-cn t0 primary-color"> + <img + src="../../assets/images/icon/mubiao.png" + alt="" + class="w-35 mr-5" + /> + <b>浠诲姟鐩爣</b> + </p> + <p class="content">鍒濇浜嗚В宸ョ▼寤虹珛銆佺粍鎬併�佷笅杞戒笌妯℃嫙杩愯銆�</p> + <p class="quotation fl al-cn t0 primary-color"> + <img + src="../../assets/images/icon/miaoshu.png" + alt="" + class="w-35 mr-5" + /> + <b>浠诲姟鎻忚堪</b> + </p> + <p>瑙︽懜灞忔槸鏂颁竴浠i珮绉�</p> <p class="content"> 鎶�浜烘満鐣岄潰浜у搧锛岄�傜敤浜庣幇鍦烘帶鍒讹紝鍙潬鎬ч珮锛岀紪绋嬬畝鍗曪紝浣跨敤銆佺淮鎶ゆ柟渚裤�傚湪宸ヨ壓鍙傛暟杈冨鍙堥渶瑕佷汉鏈轰氦浜掓椂浣跨敤瑙︽懜灞忥紝鍙娇鏁翠釜鐢熶骇鐨勮嚜鍔ㄥ寲鎺у埗鐨勫姛鑳藉緱鍒板ぇ澶у湴鍔犲己銆傛湰浠诲姟瀛︿範宓屽叆寮忕粍鎬佽蒋浠跺伐绋嬪缓绔嬨�佺粍鎬併�佹ā鎷熻繍琛屽拰涓嬭浇鍒拌Е鎽稿睆鐨勪竴鑸繃绋嬨�� </p> @@ -879,7 +918,7 @@ </div> <div class="qrbodyPic"> - <el-image :src="imgtOne" :preview-src-list="[imgtOne]" /> + <el-image :src="imgtOne" :preview-src-list="[imgtOne]" class="source-img" /> <p class="imgdescript">鍥�1-28銆�娣诲姞鎸囩ず鐏�</p> </div> <div class="fl"> @@ -1040,7 +1079,7 @@ class="h-pic" src="../../assets/images/img00025007.jpg" active="true" - />鎸夐挳锛岃繘琛屼笅杞介厤缃�傚崟鍑烩�滆仈鏈鸿繍琛屸�濇寜閽紝杩炴帴鏂瑰紡閫夋嫨鈥淭CP/IP缃戠粶閫氫俊鈥濓紝璁剧疆瑙︽懜灞廔P涓庤绠楁満IP鍦ㄥ悓涓�缃戞鍐咃紝鍗曞嚮鈥滈�氫俊娴嬭瘯鈥濇寜閽紝閫氫俊娴嬭瘯姝e父鍚庯紝鍗曞嚮鈥滃伐绋嬩笅杞解�濇寜閽�� + />鎸夐挳锛岃繘琛屼笅杞介厤缃�傚崟鍑烩�滆仈鏈鸿繍琛屸�濇寜閽紝杩炴帴鏂瑰紡閫夋嫨鈥淭CP/IP缃戠粶閫氫俊鈥濓紝璁剧疆瑙︽懜灞廔P涓庤绠楁満IP鍦ㄥ悓涓�缃戞鍐咃紝鍗曞嚮鈥滈�氫俊娴嬭瘯鈥濇寜閽紝閫� </p> </div> <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40"> @@ -1055,6 +1094,7 @@ <img src="../../assets/images/page-header.png" alt="" class="w100" /> </div> <div class="padding-96"> + <p class="content t0">淇℃祴璇曟甯稿悗锛屽崟鍑烩�滃伐绋嬩笅杞解�濇寜閽��</p> <p class="quotation fl al-cn t0 primary-color"> <img src="../../assets/images/icon/arrow-four.png" @@ -1117,7 +1157,7 @@ 琛�1-3銆�鍔熻兘娴嬭瘯琛� <i class="el-icon-share cu-pr"></i> </p> </div> - <table border="1" cellpadding="10" cellspacing="0" class="w100"> + <table border="1" cellpadding="4" cellspacing="0" class="w100"> <tr class="table-bc"> <td class="table-cn"> <img src="../../assets/images/table-td.png" class="w100" /> @@ -1128,23 +1168,23 @@ </tr> <tr> <td>鎸変笅鈥滄寚绀虹伅1鈥濇寜閽�</td> - <td><textarea class="textarea-table-td"></textarea></td> - <td><textarea class="textarea-table-td"></textarea></td> + <td><input style="width: 100%" class="border-0 " /></td> + <td><input style="width: 100%" class="border-0 " /></td> <td> - <textarea class="textarea-table-td"></textarea> + <input style="width: 100%" class="border-0 " /> </td> </tr> <tr> - <td>鎸変笅鈥滄寚绀虹伅1鈥濇寜閽�</td> - <td><textarea class="textarea-table-td"></textarea></td> - <td><textarea class="textarea-table-td"></textarea></td> - <td><textarea class="textarea-table-td"></textarea></td> + <td><div style="width:150px">鎸変笅鈥滄寚绀虹伅1鈥濇寜閽�</div></td> + <td><input style="width: 100%" class="border-0 " /></td> + <td><input style="width: 100%" class="border-0 " /></td> + <td><input style="width: 100%" class="border-0 " /></td> </tr> <tr> <td>鎸変笅鈥滄寚绀虹伅2鈥濇寜閽�</td> - <td><textarea class="textarea-table-td"></textarea></td> - <td><textarea class="textarea-table-td"></textarea></td> - <td><textarea class="textarea-table-td"></textarea></td> + <td><input style="width: 100%" class="border-0 " /></td> + <td><input style="width: 100%" class="border-0 " /></td> + <td><input style="width: 100%" class="border-0 " /></td> </tr> </table> <div class="qrbodyPic"> @@ -1152,13 +1192,13 @@ 琛�1-4銆�璇勫垎琛� <i class="el-icon-share cu-pr"></i> </p> </div> - <table border="1" cellpadding="10" cellspacing="0"> + <table border="1" cellpadding="4" cellspacing="0"> <tr class="table-bc"> <td class="table-cn" colspan="2"> 璇� 鍒� 琛�<br /> <input style="width: 30px" class="input-border table-bc" /> 瀛﹀勾 </td> - <td class="table-cn"> + <td class="table-cn"> 宸� 浣� 褰� 寮� <br /> <input type="checkbox" name="xingshi" value="prople" /> 涓汉 <input type="checkbox" name="xingshi" value="fengong" /> 灏忕粍鍒嗗伐 @@ -1177,8 +1217,8 @@ <td class="table-cn">鏁欏笀璇勫垎</td> </tr> <tr> - <td rowspan="5">寤虹珛宸ョ▼鍜屼笅杞藉伐绋�</td> - <td>宸ヤ綔姝ラ鍙婄數璺浘鏍凤紝20鍒�</td> + <td rowspan="5"><div style="width:20px">寤虹珛宸ョ▼鍜屼笅杞藉伐绋�</div></td> + <td><div>宸ヤ綔姝ラ鍙婄數璺浘鏍凤紝20鍒�</div></td> <td>璁粌姝ラ:闇�瑕佺殑鍏冨櫒浠�</td> <td> <textarea class="textarea-table-td"></textarea> @@ -1214,112 +1254,117 @@ <td><textarea class="textarea-table-td"></textarea></td> </tr> </table> - <p class="content mt-20"><b>缁冧範涓庢彁楂�</b></p> - <p class="quotation">1锛庨槓杩板祵鍏ュ紡缁勬�併�佽Е鎽稿睆涔嬮棿鐨勫叧绯汇��</p> - <p class="ti-2"> + <!-- <p class="content mt-20"><b>缁冧範涓庢彁楂�</b></p> --> + <h2 class="secondTitle primary-color" id="sigil_toc_id_13"> + 缁冧範涓庢彁楂� + </h2> + <div class="w100 border-so mb-5"></div> + <div class="w50 rw-border mb-20"></div> + <p class="quotation t0">1锛庨槓杩板祵鍏ュ紡缁勬�併�佽Е鎽稿睆涔嬮棿鐨勫叧绯汇��</p> + <p class="question-textaere"> <textarea cols="30" rows="6" placeholder="璇疯緭鍏ュ唴瀹�" maxlength="800" class="ta-br textarea-text" - style="width: 93%" + style="width: 95%" ></textarea> </p> - <p class="quotation">2锛庢槸鍚﹀彲浠ラ噰鐢║鐩樹笅杞界粍鎬佽繃绋嬶紵杩囩▼姝ラ濡備綍锛�</p> - <p class="ti-2"> + <p class="quotation t0">2锛庢槸鍚﹀彲浠ラ噰鐢║鐩樹笅杞界粍鎬佽繃绋嬶紵杩囩▼姝ラ濡備綍锛�</p> + <p class="question-textaere"> <textarea cols="30" rows="6" placeholder="璇疯緭鍏ュ唴瀹�" maxlength="800" class="ta-br textarea-text" - style="width: 93%" + style="width: 95%" ></textarea> </p> - <p class="quotation"> + <p class="quotation t0"> 3锛庡湪娣樺疂缃戠珯鏌ユ壘浠诲姟涓�涓富娴丳LC涓庤Е鎽稿睆杩炴帴绾垮瀷鍙枫�佹�ц兘鍜屼环鏍笺�� </p> - <p class="ti-2"> + <p class="question-textaere"> <textarea cols="30" rows="6" placeholder="璇疯緭鍏ュ唴瀹�" maxlength="800" class="ta-br textarea-text" - style="width: 93%" + style="width: 95%" ></textarea> </p> - <p class="quotation"> + <p class="quotation t0"> 4锛庡垎鏋愯绠楁満銆佸钩鏉跨數鑴戙�佽Е鎽稿睆銆丳LC涔嬮棿杩炴帴鐨勫紓鍚屻�� </p> - <p class="ti-2"> + <p class="question-textaere"> <textarea cols="30" rows="6" placeholder="璇疯緭鍏ュ唴瀹�" maxlength="800" class="ta-br textarea-text" - style="width: 93%" + style="width: 95%" ></textarea> </p> - <p class="quotation"> + <p class="quotation t0"> 5锛庝粈涔堟槸鐢ㄦ埛搴旂敤绯荤粺銆佺粍鎬佺幆澧冧笌杩愯鐜锛熺粍鎬佺幆澧冩槸寮�鍙戝伐鍏峰悧锛� </p> - <p class="ti-2"> + <p class="question-textaere"> <textarea cols="30" rows="6" placeholder="璇疯緭鍏ュ唴瀹�" maxlength="800" class="ta-br textarea-text" - style="width: 93%" + style="width: 95%" ></textarea> </p> - <p class="quotation"> + <p class="quotation t0"> 6锛嶮CGS瑙︽懜灞忓畨瑁呬綍绉嶆搷浣滅郴缁燂紵涓昏鑷甫浣曠搴旂敤杞欢锛熶粠www.mcgs.com.cn缃戠珯涓嬭浇鏈�鏂拌蒋浠跺寘骞跺畨瑁咃紝鍦╳ww.gongkong.com娉ㄥ唽锛岃繘鍏BS璁ㄨ宸ユ帶杞欢鎶�鏈�� </p> - <p class="ti-2"> + <p class="question-textaere"> <textarea cols="30" rows="6" placeholder="璇疯緭鍏ュ唴瀹�" maxlength="800" class="ta-br textarea-text" - style="width: 93%" + style="width: 95%" ></textarea> </p> - <p class="quotation">7锛庣粍鎬佸彉閲忔�庢牱寤虹珛瀵瑰簲鏁版嵁鍏崇郴锛�</p> - <p class="ti-2"> + <p class="quotation t0">7锛庣粍鎬佸彉閲忔�庢牱寤虹珛瀵瑰簲鏁版嵁鍏崇郴锛�</p> + <p class="question-textaere"> <textarea cols="30" rows="6" placeholder="璇疯緭鍏ュ唴瀹�" maxlength="800" class="ta-br textarea-text" - style="width: 93%" + style="width: 95%" ></textarea> </p> - <p class="quotation">8锛庝簡瑙S-232銆丷S-485鎺ュ彛鎬ц兘鍔熻兘鍜孴CP/IP鍗忚銆�</p> - <p class="ti-2"> + <p class="quotation t0">8锛庝簡瑙S-232銆丷S-485鎺ュ彛鎬ц兘鍔熻兘鍜孴CP/IP鍗忚銆�</p> + <p class="question-textaere"> <textarea cols="30" rows="6" placeholder="璇疯緭鍏ュ唴瀹�" maxlength="800" class="ta-br textarea-text" - style="width: 93%" + style="width: 95%" ></textarea> </p> - <p class="quotation">9锛庢瘮杈冭Е鎽稿睆涓殑缁勬�佸伐绋嬪拰鎵嬫満涓殑APP鐨勫尯鍒��</p> - <p class="ti-2"> + <p class="quotation t0">9锛庢瘮杈冭Е鎽稿睆涓殑缁勬�佸伐绋嬪拰鎵嬫満涓殑APP鐨勫尯鍒��</p> + <p class="question-textaere"> <textarea cols="30" rows="6" placeholder="璇疯緭鍏ュ唴瀹�" maxlength="800" class="ta-br textarea-text" - style="width: 93%" + style="width: 95%" ></textarea> </p> </div> @@ -1413,6 +1458,7 @@ p { font-family: "瀹嬩綋", SimSun, sans-serif !important; margin: 0; + text-align: justify; } textarea { resize: none; @@ -1432,17 +1478,25 @@ .right-resource { position: absolute; right: -80px; - top:40px + top: 40px; } .word-resource { padding: 0; border: 1px solid #501438; - li { - padding: 0 8px; - border-right: 1px dotted #501438; + .p08 { + padding:0 8px; } + // li { + // padding: 0 8px; + // } li:last-child { border: 0; + } + .word-border { + display: inline-block; + height: 70%; + width: 2px; + border-right: 1px dashed #501438; } } .bones-carousel { @@ -1457,4 +1511,14 @@ object-fit: contain; } } +.source-img { + /deep/ .el-image__inner { + max-width: 312px; + } +} +.question-textaere { + text-indent: 0; + padding-left: 23px; +} + </style> diff --git a/src/books/embedded/view/components/header.vue b/src/books/embedded/view/components/header.vue index a11d247..97dc46b 100644 --- a/src/books/embedded/view/components/header.vue +++ b/src/books/embedded/view/components/header.vue @@ -3,7 +3,7 @@ <!-- 灏侀潰 --> <div class="page-box" page="1"> <h1 class="frontCover" title="灏侀潰"> - <img alt="灏侀潰" src="../../assets/images/device_phone_Frontcover.jpg" class="cover-box" /> + <img alt="灏侀潰" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100" /> </h1> </div> <!-- 浣滆�呯畝浠� --> @@ -31,7 +31,7 @@ <!-- 灏侀潰 --> <div class="page-box" page="3"> <h1 class="frontCover" title="灏侀潰"> - <img alt="灏侀潰" src="../../assets/images/device_phone_Frontcover.jpg" class="cover-box"> + <img alt="灏侀潰" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100"> </h1> </div> <!-- 鍐呭绠�浠� --> -- Gitblit v1.9.1