From ef37c59e055a990ce247b265b27d3fcef430a243 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期五, 15 八月 2025 10:19:18 +0800
Subject: [PATCH] first submit
---
src/components/bookInfo.vue | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 100 insertions(+), 0 deletions(-)
diff --git a/src/components/bookInfo.vue b/src/components/bookInfo.vue
new file mode 100644
index 0000000..04240fb
--- /dev/null
+++ b/src/components/bookInfo.vue
@@ -0,0 +1,100 @@
+<template>
+ <div class="bookInfo">
+ <div class="recommend">
+ <div class="title">鎺ㄨ崘鐞嗙敱</div>
+ <div class="content">
+ 鏈功灞炰簬鏅�氶珮绛夋暀鑲测�滃崄涓�浜斺��*瑙勫垝鏁欐潗,涓昏閽堝楂樼瓑鍐滀笟闄㈡牎鍔ㄧ墿鍖诲鍜屽姩鐗╃瀛︿笓涓氬鐢熺紪鍐欍�傚唴瀹规敞閲嶅熀纭�鐭ヨ瘑,閫傚害鑱旂郴涓撲笟瀹為檯,骞跺紩鍏ヤ簡鐢熺墿鍖栧鐨勬柊杩涘睍銆傚唴瀹瑰叡鍒嗕负15绔�,鍖呮嫭浜斿ぇ閮ㄥ垎:(1)鐢熺墿鍒嗗瓙鐨勭粨鏋勪笌鍔熻兘,鍖呮嫭鏍搁吀銆佽泲鐧借川銆侀叾鍜岀敓鐗╄啘;(2)鐗╄川浠ｈ阿閮ㄥ垎,鍖呮嫭绯栫被浠ｈ阿銆佽剛绫讳唬璋€�佹皑鍩洪吀浠ｈ阿銆佹牳鑻烽吀浠ｈ阿銆佽兘閲忎唬璋互鍙婂悇閫斿緞鐨勭浉浜掕仈绯诲拰鏁翠綋璋冩帶;(3)閬椾紶淇℃伅鐨勪紶閫掍笌璋冩帶,鍖呮嫭澶嶅埗銆佽浆褰曘�佺炕璇戙�佸熀鍥犺〃杈捐皟鎺�;(4)鍔ㄧ墿浣撲唬璋㈢殑鐗圭偣,鍖呮嫭鍔ㄧ墿浣撻吀纰卞钩琛′笌閽欑７浠ｈ阿銆佽娑茬敓鍖栥�佽倽鑴忕敓鍖栥�佸ぇ鑴戠敓鍖�;(5)鐜颁唬鐢熺墿鎶�鏈強鍏跺湪鐣滅墽鍏藉尰涓殑搴旂敤銆傛湰涔﹀睘浜庢櫘閫氶珮绛夋暀鑲测�滃崄涓�浜斺��*瑙勫垝鏁欐潗,涓昏閽堝楂樼瓑鍐滀笟闄㈡牎鍔ㄧ墿鍖诲鍜屽姩鐗╃瀛︿笓涓氬鐢熺紪鍐欍�傚唴瀹规敞閲嶅熀纭�鐭ヨ瘑,閫傚害鑱旂郴涓撲笟瀹為檯,骞跺紩鍏ヤ簡鐢熺墿鍖栧鐨勬柊杩涘睍銆傚唴瀹瑰叡鍒嗕负15绔�,鍖呮嫭浜斿ぇ閮ㄥ垎:(1)鐢熺墿鍒嗗瓙鐨勭粨鏋勪笌鍔熻兘,鍖呮嫭鏍搁吀銆佽泲鐧借川銆侀叾鍜岀敓鐗╄啘;(2)鐗╄川浠ｈ阿閮ㄥ垎,鍖呮嫭绯栫被浠ｈ阿銆佽剛绫讳唬璋€�佹皑鍩洪吀浠ｈ阿銆佹牳鑻烽吀浠ｈ阿銆佽兘閲忎唬璋互鍙婂悇閫斿緞鐨勭浉浜掕仈绯诲拰鏁翠綋璋冩帶;(3)閬椾紶淇℃伅鐨勪紶閫掍笌璋冩帶,鍖呮嫭澶嶅埗銆佽浆褰曘�佺炕璇戙�佸熀鍥犺〃杈捐皟鎺�;(4)鍔ㄧ墿浣撲唬璋㈢殑鐗圭偣,鍖呮嫭鍔ㄧ墿浣撻吀纰卞钩琛′笌閽欑７浠ｈ阿銆佽娑茬敓鍖栥�佽倽鑴忕敓鍖栥�佸ぇ鑴戠敓鍖�;(5)鐜颁唬鐢熺墿鎶�鏈強鍏跺湪鐣滅墽鍏藉尰涓殑搴旂敤銆傛湰涔﹀睘浜庢櫘閫氶珮绛夋暀鑲测�滃崄涓�浜斺��*瑙勫垝鏁欐潗,涓昏閽堝楂樼瓑鍐滀笟闄㈡牎鍔ㄧ墿鍖诲鍜屽姩鐗╃瀛︿笓涓氬鐢熺紪鍐欍�傚唴瀹规敞閲嶅熀纭�鐭ヨ瘑,閫傚害鑱旂郴涓撲笟瀹為檯,骞跺紩鍏ヤ簡鐢熺墿鍖栧鐨勬柊杩涘睍銆傚唴瀹瑰叡鍒嗕负15绔�,鍖呮嫭浜斿ぇ閮ㄥ垎:(1)鐢熺墿鍒嗗瓙鐨勭粨鏋勪笌鍔熻兘,鍖呮嫭鏍搁吀銆佽泲鐧借川銆侀叾鍜岀敓鐗╄啘;(2)鐗╄川浠ｈ阿閮ㄥ垎,鍖呮嫭绯栫被浠ｈ阿銆佽剛绫讳唬璋€�佹皑鍩洪吀浠ｈ阿銆佹牳鑻烽吀浠ｈ阿銆佽兘閲忎唬璋互鍙婂悇閫斿緞鐨勭浉浜掕仈绯诲拰鏁翠綋璋冩帶;(3)閬椾紶淇℃伅鐨勪紶閫掍笌璋冩帶,鍖呮嫭澶嶅埗銆佽浆褰曘�佺炕璇戙�佸熀鍥犺〃杈捐皟鎺�;(4)鍔ㄧ墿浣撲唬璋㈢殑鐗圭偣,鍖呮嫭鍔ㄧ墿浣撻吀纰卞钩琛′笌閽欑７浠ｈ阿銆佽娑茬敓鍖栥�佽倽鑴忕敓鍖栥�佸ぇ鑴戠敓鍖�;(5)鐜颁唬鐢熺墿鎶�鏈強鍏跺湪鐣滅墽鍏藉尰涓殑搴旂敤銆傛湰涔﹀睘浜庢櫘閫氶珮绛夋暀鑲测�滃崄涓�浜斺��*瑙勫垝鏁欐潗,涓昏閽堝楂樼瓑鍐滀笟闄㈡牎鍔ㄧ墿鍖诲鍜屽姩鐗╃瀛︿笓涓氬鐢熺紪鍐欍�傚唴瀹规敞閲嶅熀纭�鐭ヨ瘑,閫傚害鑱旂郴涓撲笟瀹為檯,骞跺紩鍏ヤ簡鐢熺墿鍖栧鐨勬柊杩涘睍銆傚唴瀹瑰叡鍒嗕负15绔�,鍖呮嫭浜斿ぇ閮ㄥ垎:(1)鐢熺墿鍒嗗瓙鐨勭粨鏋勪笌鍔熻兘,鍖呮嫭鏍搁吀銆佽泲鐧借川銆侀叾鍜岀敓鐗╄啘;(2)鐗╄川浠ｈ阿閮ㄥ垎,鍖呮嫭绯栫被浠ｈ阿銆佽剛绫讳唬璋€�佹皑鍩洪吀浠ｈ阿銆佹牳鑻烽吀浠ｈ阿銆佽兘閲忎唬璋互鍙婂悇閫斿緞鐨勭浉浜掕仈绯诲拰鏁翠綋璋冩帶;(3)閬椾紶淇℃伅鐨勪紶閫掍笌璋冩帶,鍖呮嫭澶嶅埗銆佽浆褰曘�佺炕璇戙�佸熀鍥犺〃杈捐皟鎺�;(4)鍔ㄧ墿浣撲唬璋㈢殑鐗圭偣,鍖呮嫭鍔ㄧ墿浣撻吀纰卞钩琛′笌閽欑７浠ｈ阿銆佽娑茬敓鍖栥�佽倽鑴忕敓鍖栥�佸ぇ鑴戠敓鍖�;(5)鐜颁唬鐢熺墿鎶�鏈強鍏跺湪鐣滅墽鍏藉尰涓殑搴旂敤銆傛湰涔﹀睘浜庢櫘閫氶珮绛夋暀鑲测�滃崄涓�浜斺��*瑙勫垝鏁欐潗,涓昏閽堝楂樼瓑鍐滀笟闄㈡牎鍔ㄧ墿鍖诲鍜屽姩鐗╃瀛︿笓涓氬鐢熺紪鍐欍�傚唴瀹规敞閲嶅熀纭�鐭ヨ瘑,閫傚害鑱旂郴涓撲笟瀹為檯,骞跺紩鍏ヤ簡鐢熺墿鍖栧鐨勬柊杩涘睍銆傚唴瀹瑰叡鍒嗕负15绔�,鍖呮嫭浜斿ぇ閮ㄥ垎:(1)鐢熺墿鍒嗗瓙鐨勭粨鏋勪笌鍔熻兘,鍖呮嫭鏍搁吀銆佽泲鐧借川銆侀叾鍜岀敓鐗╄啘;(2)鐗╄川浠ｈ阿閮ㄥ垎,鍖呮嫭绯栫被浠ｈ阿銆佽剛绫讳唬璋€�佹皑鍩洪吀浠ｈ阿銆佹牳鑻烽吀浠ｈ阿銆佽兘閲忎唬璋互鍙婂悇閫斿緞鐨勭浉浜掕仈绯诲拰鏁翠綋璋冩帶;(3)閬椾紶淇℃伅鐨勪紶閫掍笌璋冩帶,鍖呮嫭澶嶅埗銆佽浆褰曘�佺炕璇戙�佸熀鍥犺〃杈捐皟鎺�;(4)鍔ㄧ墿浣撲唬璋㈢殑鐗圭偣,鍖呮嫭鍔ㄧ墿浣撻吀纰卞钩琛′笌閽欑７浠ｈ阿銆佽娑茬敓鍖栥�佽倽鑴忕敓鍖栥�佸ぇ鑴戠敓鍖�;(5)鐜颁唬鐢熺墿鎶�鏈強鍏跺湪鐣滅墽鍏藉尰涓殑搴旂敤銆傛湰涔﹀睘浜庢櫘閫氶珮绛夋暀鑲测�滃崄涓�浜斺��*瑙勫垝鏁欐潗,涓昏閽堝楂樼瓑鍐滀笟闄㈡牎鍔ㄧ墿鍖诲鍜屽姩鐗╃瀛︿笓涓氬鐢熺紪鍐欍�傚唴瀹规敞閲嶅熀纭�鐭ヨ瘑,閫傚害鑱旂郴涓撲笟瀹為檯,骞跺紩鍏ヤ簡鐢熺墿鍖栧鐨勬柊杩涘睍銆傚唴瀹瑰叡鍒嗕负15绔�,鍖呮嫭浜斿ぇ閮ㄥ垎:(1)鐢熺墿鍒嗗瓙鐨勭粨鏋勪笌鍔熻兘,鍖呮嫭鏍搁吀銆佽泲鐧借川銆侀叾鍜岀敓鐗╄啘;(2)鐗╄川浠ｈ阿閮ㄥ垎,鍖呮嫭绯栫被浠ｈ阿銆佽剛绫讳唬璋€�佹皑鍩洪吀浠ｈ阿銆佹牳鑻烽吀浠ｈ阿銆佽兘閲忎唬璋互鍙婂悇閫斿緞鐨勭浉浜掕仈绯诲拰鏁翠綋璋冩帶;(3)閬椾紶淇℃伅鐨勪紶閫掍笌璋冩帶,鍖呮嫭澶嶅埗銆佽浆褰曘�佺炕璇戙�佸熀鍥犺〃杈捐皟鎺�;(4)鍔ㄧ墿浣撲唬璋㈢殑鐗圭偣,鍖呮嫭鍔ㄧ墿浣撻吀纰卞钩琛′笌閽欑７浠ｈ阿銆佽娑茬敓鍖栥�佽倽鑴忕敓鍖栥�佸ぇ鑴戠敓鍖�;(5)鐜颁唬鐢熺墿鎶�鏈強鍏跺湪鐣滅墽鍏藉尰涓殑搴旂敤銆�
+ </div>
+ </div>
+ <div class="otherBox">
+ <div class="itemBox" v-for="(item,index) in dataList" :key="index">
+ <div class="itemTitle"><div class="titleName">{{item.title}}</div></div>
+ <div class="itemContent">
+ {{item.content}}
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ dataList: [
+ {
+ title: "浣滆�呮湇鍔�",
+ content:
+ "鏈功灞炰簬鏅�氶珮绛夋暀鑲测�滃崄涓�浜斺��*瑙勫垝鏁欐潗,涓昏閽堝楂樼瓑鍐滀笟闄㈡牎鍔ㄧ墿鍖诲鍜屽姩鐗╃瀛︿笓涓氬鐢熺紪鍐欍�傚唴瀹规敞閲嶅熀纭�鐭ヨ瘑,閫傚害鑱旂郴涓撲笟瀹為檯,骞跺紩鍏ヤ簡鐢熺墿鍖栧鐨勬柊杩涘睍銆傚唴瀹瑰叡鍒嗕负15绔�,鍖呮嫭浜斿ぇ閮ㄥ垎:(1)鐢熺墿鍒嗗瓙鐨勭粨鏋勪笌鍔熻兘,鍖呮嫭鏍搁吀銆佽泲鐧借川銆侀叾鍜岀敓鐗╄啘",
+ },
+ {
+ title: "浣滆�呮湇鍔�",
+ content:
+ "鏈功灞炰簬鏅�氶珮绛夋暀鑲测�滃崄涓�浜斺��*瑙勫垝鏁欐潗,涓昏閽堝楂樼瓑鍐滀笟闄㈡牎鍔ㄧ墿鍖诲鍜屽姩鐗╃瀛︿笓涓氬鐢熺紪鍐欍�傚唴瀹规敞閲嶅熀纭�鐭ヨ瘑,閫傚害鑱旂郴涓撲笟瀹為檯,骞跺紩鍏ヤ簡鐢熺墿鍖栧鐨勬柊杩涘睍銆傚唴瀹瑰叡鍒嗕负15绔�,鍖呮嫭浜斿ぇ閮ㄥ垎:(1)鐢熺墿鍒嗗瓙鐨勭粨鏋勪笌鍔熻兘,鍖呮嫭鏍搁吀銆佽泲鐧借川銆侀叾鍜岀敓鐗╄啘",
+ },
+ {
+ title: "浣滆�呮湇鍔�",
+ content:
+ "鏈功灞炰簬鏅�氶珮绛夋暀鑲测�滃崄涓�浜斺��*瑙勫垝鏁欐潗,涓昏閽堝楂樼瓑鍐滀笟闄㈡牎鍔ㄧ墿鍖诲鍜屽姩鐗╃瀛︿笓涓氬鐢熺紪鍐欍�傚唴瀹规敞閲嶅熀纭�鐭ヨ瘑,閫傚害鑱旂郴涓撲笟瀹為檯,骞跺紩鍏ヤ簡鐢熺墿鍖栧鐨勬柊杩涘睍銆傚唴瀹瑰叡鍒嗕负15绔�,鍖呮嫭浜斿ぇ閮ㄥ垎:(1)鐢熺墿鍒嗗瓙鐨勭粨鏋勪笌鍔熻兘,鍖呮嫭鏍搁吀銆佽泲鐧借川銆侀叾鍜岀敓鐗╄啘",
+ },
+ {
+ title: "浣滆�呮湇鍔�",
+ content:
+ "鏈功灞炰簬鏅�氶珮绛夋暀鑲测�滃崄涓�浜斺��*瑙勫垝鏁欐潗,涓昏閽堝楂樼瓑鍐滀笟闄㈡牎鍔ㄧ墿鍖诲鍜屽姩鐗╃瀛︿笓涓氬鐢熺紪鍐欍�傚唴瀹规敞閲嶅熀纭�鐭ヨ瘑,閫傚害鑱旂郴涓撲笟瀹為檯,骞跺紩鍏ヤ簡鐢熺墿鍖栧鐨勬柊杩涘睍銆傚唴瀹瑰叡鍒嗕负15绔�,鍖呮嫭浜斿ぇ閮ㄥ垎:(1)鐢熺墿鍒嗗瓙鐨勭粨鏋勪笌鍔熻兘,鍖呮嫭鏍搁吀銆佽泲鐧借川銆侀叾鍜岀敓鐗╄啘",
+ },
+ ],
+ };
+ },
+};
+</script>
+
+<style scoped>
+.bookInfo {
+ width: 813px;
+ background-color: #fff;
+ margin: 10px 0 0 10px;
+ padding: 40px;
+}
+.recommend {
+ max-height: 270px;
+ background-color: #fbf5eb;
+ overflow: auto;
+ border-radius: 4px;
+ border: 1px solid #ebd5b4;
+}
+.title {
+ height: 20px;
+ line-height: 20px;
+ border-bottom: 1px dashed #d6d6d6;
+ padding: 20px;
+ color: #333333;
+ font-size: 18px;
+ font-weight: 700;
+}
+.content {
+ max-height: 210px;
+ line-height: 40px;
+ margin-top: 20px;
+}
+.itemTitle {
+ height: 20px;
+ background: #f8f8f8;
+ position: relative;
+}
+.titleName {
+ font-size: 18px;
+ font-weight: 700;
+ position: absolute;
+ top: -10px;
+}
+.otherBox {
+ margin-top: 40px;
+}
+.itemContent {
+ padding: 20px;
+ line-height: 20px;
+}
+.itemBox{
+ margin-top: 50px;
+}
+</style>
--
Gitblit v1.9.1