首页开发中

package-lock.json

@@ -6387,6 +6387,14 @@
         "keygrip": "~1.1.0"
       }
     },
+    "copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "requires": {
+        "is-what": "^3.14.1"
+      }
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -9009,6 +9017,12 @@
       "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "optional": true
+    },
     "immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
@@ -9297,6 +9311,11 @@
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
       "dev": true
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -11174,8 +11193,7 @@
     "klona": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
-      "dev": true
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA=="
     },
     "koa": {
       "version": "2.14.2",
@@ -11458,6 +11476,78 @@
         "invert-kv": "^3.0.0"
       }
     },
+    "less": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
+      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-7.3.0.tgz",
+      "integrity": "sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg==",
+      "requires": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.2.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+          "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -11971,8 +12061,7 @@
     "mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
     },
     "mime-db": {
       "version": "1.52.0",
@@ -12228,6 +12317,37 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "needle": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.2.0.tgz",
+      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "optional": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -12819,6 +12939,11 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA=="
+    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
@@ -14539,6 +14664,12 @@
         }
       }
     },
+    "sax": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
+      "optional": true
+    },
     "saxes": {
       "version": "3.1.11",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-3.1.11.tgz",
@@ -16039,8 +16170,7 @@
     "tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "tsscmp": {
       "version": "1.0.6",

package.json

@@ -74,6 +74,8 @@
     "axios-miniprogram-adapter": "^0.3.5",
     "core-js": "^3.8.3",
     "flyio": "^0.6.2",
+    "less": "^4.2.0",
+    "less-loader": "^7.3.0",
     "postcss-loader": "^7.3.3",
     "vue": ">= 2.6.14 < 2.7",
     "vue-class-component": "^6.3.2",

postcss.config.js

@@ -2,6 +2,13 @@ const path = require('path')
 const webpack = require('webpack')
 const config = {
   parser: require('postcss-comment'),
+  css: {
+    loaderOptions: {
+      less: {
+        javascriptEnabled: true
+      }
+    }
+  },
   plugins: [
     require('postcss-import')({
       resolve (id, basedir, importOptions) {

src/App.vue

@@ -15,5 +15,15 @@
 </script>
 
 <style>
+page {
+  font-family: -apple-system, Arial, "Helvetica Neue", Helvetica, "PingFang SC",
+    "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei",
+    sans-serif;
+}
+view {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
     /*每个页面公共css */
 </style>

src/pages/forecast/index.vue

@@ -4,22 +4,99 @@
         <view class="content">
             <view class="user">
                 <view style="width:50%">
-                    <text>【姓  名】</text>
+                    <text>【姓 名】</text>
                     <text>张三</text>
                 </view>
                 <view style="width:50%">
-                    <text>【性  别】</text>
+                    <text>【性 别】</text>
                     <text>男</text>
                 </view>
                 <view style="width:100%">
-                    <text>【公  历】</text>
+                    <text>【公 历】</text>
                     <text>1988年11月22日17时25分</text>
                 </view>
                 <view style="width:100%">
-                    <text>【农  历】</text>
+                    <text>【农 历】</text>
                     <text>1988年(生肖龙)十月十四酉时</text>
                 </view>
             </view>
+            <view class="table">
+                <view class="header">
+                    <view class="row">
+                        四柱
+                    </view>
+                    <view class="row">
+                        年柱
+                    </view>
+                    <view class="row">
+                        月柱
+                    </view>
+                    <view class="row">
+                        日柱
+                    </view>
+                    <view style="border: none;" class="row">
+                        时柱
+                    </view>
+                </view>
+                <view class="body">
+                    <view class="row">天干</view>
+                    <view class="row">戊</view>
+                    <view class="row">戊</view>
+                    <view class="row">壬</view>
+                    <view style="border: none;" class="row">甲</view>
+                </view>
+                <view class="body">
+                    <view class="row">地支</view>
+                    <view class="row">戊</view>
+                    <view class="row">戊</view>
+                    <view class="row">壬</view>
+                    <view style="border: none;" class="row">甲</view>
+                </view>
+                <view class="body">
+                    <view class="row">地支</view>
+                    <view class="row">戊</view>
+                    <view class="row">戊</view>
+                    <view class="row">壬</view>
+                    <view style="border: none;" class="row">甲</view>
+                </view>
+                <view class="body">
+                    <view class="row">地支</view>
+                    <view class="row">戊</view>
+                    <view class="row">戊</view>
+                    <view class="row">壬</view>
+                    <view style="border: none;" class="row">甲</view>
+                </view>
+                <view class="body">
+                    <view class="row">地支</view>
+                    <view class="row">戊</view>
+                    <view class="row">戊</view>
+                    <view class="row">壬</view>
+                    <view style="border: none;" class="row">甲</view>
+                </view>
+                <view class="body">
+                    <view class="row">地支</view>
+                    <view class="row">戊</view>
+                    <view class="row">戊</view>
+                    <view class="row">壬</view>
+                    <view style="border: none;" class="row">甲</view>
+                </view>
+            </view>
+            <view class="result">
+                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
+                <view class="imgTitle"><text>甲</text><text>辰</text><text>日</text><text>柱</text></view>
+                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
+                <view class="result-content">
+                    <view class="">
+
+                    </view>
+                    <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
+                    <!-- <view class="result-content-border1">
+                        <view class="result-content-border2">
+                        </view>
+                    </view> -->
+                </view>
+                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+            </view>
 
 
 
@@ -45,7 +122,7 @@ export default Vue.extend({
 });
 </script>
 
-<style  scoped>
+<style lang="less" scoped>
 .bg {
     background-color: #BFE2F4;
     width: 100vw;
@@ -56,12 +133,101 @@ export default Vue.extend({
     padding: 50rpx 50rpx;
     font-weight: 600;
 
-}
+    .user {
+        padding: 0 40rpx;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-bottom: 30rpx;
+    }
+
+    .table {
+        width: 568rpx;
+        margin: 0 auto;
+
+
+        .header {
+            width: 100%;
+            line-height: 82rpx;
+            border: 4rpx solid #006494;
+            display: flex;
+            text-align: center;
+            background: #1293D0;
+
+            .row {
+                width: 20%;
+                color: white;
+                border-right: 2rpx solid #fff;
+            }
+        }
+
+        .body {
+            width: 100%;
+            line-height: 82rpx;
+            border: 4rpx solid #006494;
+            display: flex;
+            text-align: center;
+            background-color: #A7DDF8;
+            border-top: none;
+
+            .row {
+                width: 20%;
+                color: white;
+                border-right: 2rpx solid #006494;
+
+            }
+        }
+    }
+
+    .result {
+        width: 653rpx;
+        height: auto;
+        margin: 0 auto;
+        display: flex;
+        flex-wrap: wrap;
+        position: relative;
+
+        .result-content {
+            width: 100%;
+            min-height: 200rpx;
+            background-image: url("https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png");
+            background-size: 100%;
+
+
+
+
+        }
+
+        .imgTitle {
+            top: 126rpx;
+            position: absolute;
+            font-size: 48rpx;
+            color: #006494;
+            display: flex;
+            width: 444rpx;
+            justify-content: space-around;
+            left: 105rpx;
+
 
-.user {
-    padding: 0 40rpx;
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
+
+
+        }
+
+        .imgHeader {
+            width: 100%;
+        }
+
+        .imgCircle {
+            width: 75%;
+            margin: 0 auto;
+            top: 85rpx;
+            position: absolute;
+            left: 12.5%;
+        }
+
+        .imgFooter {
+            width: 100%;
+        }
+    }
 }
 </style>

src/pages/index/index.vue

@@ -1,9 +1,59 @@
 <template>
 	<view class="content">
-		<image class="logo" src="../../static/logo.png"></image>
-		<view>
-			<text class="title">{{ title }}</text>
+		<image class="bg" src="https://ndata.zzxcx.net/xpgx-xcx/index/bg1.png"></image>
+		<image mode="widthFix" class="logo" src="https://ndata.zzxcx.net/xpgx-xcx/index/bg2.png"></image>
+		<view class="form">
+			<view class="content">
+				<image class="content-title" mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/index/title.png"></image>
+				<view class="content-inputs">
+					<view class="content-inputs-row">
+						<view class="content-inputs-row-label">命主姓名</view>
+						<view>
+							<input class="content-inputs-row-input" />
+						</view>
+					</view>
+					<view class="content-inputs-row">
+						<view class="content-inputs-row-label">起盘方式</view>
+						<view>
+							<input class="content-inputs-row-input" />
+						</view>
+					</view>
+					<view style="height: auto;" class="content-inputs-row">
+						<view class="content-inputs-row-label">出生时间</view>
+						<view style="display: flex;flex-wrap: wrap;justify-content: space-between;" class="">
+							<view class="content-inputs-row-menu">
+								2023年 <text style="font-weight: normal;text-indent: 0.5em;"> V</text>
+							</view>
+							<view class="content-inputs-row-menu">
+								10月 <text style="font-weight: normal;text-indent:  0.5em;"> V</text>
+							</view>
+							<view class="content-inputs-row-menu">
+								31日 <text style="font-weight: normal;text-indent:  0.5em;"> V</text>
+							</view>
+							<view class="content-inputs-row-menu">
+								未时 <text style="font-weight: normal;text-indent:  0.5em;">V</text>
+							</view>
+						</view>
+					</view>
+					<view class="content-inputs-row">
+						<view class="content-inputs-row-label">命主性别</view>
+						<view>
+							<input class="content-inputs-row-input" />
+						</view>
+					</view>
+					<view class="content-inputs-row">
+						<view class="content-inputs-row-label">是否保存</view>
+						<view>
+							<input class="content-inputs-row-input" />
+						</view>
+					</view>
+				</view>
+			</view>
+
 		</view>
+		<!-- <view>
+			<text class="title">{{ title }}</text>
+		</view> -->
 	</view>
 </template>
 
@@ -39,20 +89,103 @@ export default Vue.extend({
 });
 </script>
 
-<style>
+<style lang="less">
 .content {
 	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-}
+	flex-direction: row;
+
+	position: relative;
+	height: 1500rpx;
+
+	.bg {
+		width: 100%;
+		min-height: 100%;
+	}
+
+	.logo {
+		width: 100%;
+		position: absolute;
+		top: 0;
+	}
+
+	.form {
+		position: absolute;
+		padding: 0 30rpx;
+		top: 529rpx;
+		width: 100vw;
+		height: 913rpx;
+
+		.content {
+			width: 100%;
+			height: 100%;
+			padding: 0 30rpx;
+			border-radius: 20rpx;
+			background: #E4CFAC;
+			display: flex;
+			flex-wrap: wrap;
+			align-items: flex-start;
+			align-content: flex-start;
+
+			.content-title {
+				width: 100%;
+				margin-top: 15rpx;
+			}
+
+			.content-inputs {
+				width: 100%;
+				background-color: #fff;
+				height: 792rpx;
+				padding: 30rpx 0rpx;
+
+				.content-inputs-row {
+					padding: 0rpx 30rpx;
+					margin-bottom: 20rpx;
+					height: 80rpx;
+					font-size: 28rpx;
+					font-weight: 600;
+					color: #724D0F;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					.content-inputs-row-label{
+						min-width: 130rpx;
+					}
+					.content-inputs-row-input {
+						height: 80rpx;
+						font-size: 48rpx;
+						background: #F7EDDD;
+						width: 442rpx;
+						padding-left: 20rpx;
+						box-sizing: border-box;
+					}
+
+					.content-inputs-row-menu {
+						padding-left: 20rpx;
+						padding-right: 20rpx;
+						display: inline-flex;
+						justify-content: space-between;
+						align-items: center;
+						align-content: center;
+						font-size: 28rpx;
+						margin-bottom: 20rpx;
+						background: #F7EDDD;
+						height: 80rpx;
+					
+
+
+
+
+					}
+				}
+			}
+		}
+
+	}
 
-.logo {
-	height: 200rpx;
-	width: 200rpx;
-	margin: 200rpx auto 50rpx auto;
 }
 
+
+
 .text-area {
 	display: flex;
 	justify-content: center;