首頁頁面整理

dev
bruce68410 3 years ago
parent d00a079c0a
commit b0cf01c869

@ -4,9 +4,9 @@ VITE_ENV = development
VITE_APP_BASE_URL = https://utel.zltest.com.tw VITE_APP_BASE_URL = https://utel.zltest.com.tw
VITE_APP_LINE_LIFF_ID = 1656907652-p38ddKzQ VITE_APP_LINE_LIFF_ID = 2000917272-PBWoXdOl
VITE_APP_SEND_URL = https://liff.line.me/1656907652-VJq33Pdg VITE_APP_SEND_URL = https://liff.line.me/2000917272-PBWoXdOl
VITE_APP_API_URL = https://utel.zltest.com.tw/appapi/v1 VITE_APP_API_URL = https://utel.zltest.com.tw/appapi/v1

18378
package-lock.json generated

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -0,0 +1,103 @@
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap");
.my-account {
position: relative;
width: 100%;
padding: 20px;
}
.my-account .avatar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.my-account .avatar .imgCnt {
width: 80px;
height: 80px;
min-width: 80px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
.my-account .avatar .imgCnt img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.my-account .avatar .info .name {
font-size: 20px;
font-weight: bold;
color: #303a47;
}
.my-account .avatar .info .conpany {
font-size: 15px;
}
.my-account .recommend {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 20px 0 10px;
}
.my-account .recommend .btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 30%;
height: 100px;
background-color: #fff;
border: 1px #96989a solid;
border-radius: 0;
}
.my-account .recommend .btn .img {
font-size: 35px;
color: #303a47;
}
.my-account .recommend .btn .text {
font-weight: bold;
color: #303a47;
}
.content {
padding: 15px;
background-color: #b2c4ce;
}
.content .card {
border: none;
border-radius: 0;
}
.content .card .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #8d8d8d;
font-size: 15px;
}
.content .card .item i, .content .card .item svg {
color: #839eb6;
}

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 434 KiB

Binary file not shown.

@ -0,0 +1,47 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
<json>
<![CDATA[
{
"fontFamily": "lg",
"majorVersion": 1,
"minorVersion": 0,
"fontURL": "https://github.com/sachinchoolur/lightGallery",
"copyright": "sachin",
"license": "MLT",
"licenseURL": "http://opensource.org/licenses/MIT",
"version": "Version 1.0",
"fontId": "lg",
"psName": "lg",
"subFamily": "Regular",
"fullName": "lg",
"description": "Font generated by IcoMoon."
}
]]>
</json>
</metadata>
<defs>
<font id="lg" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe01a;" glyph-name="pause_circle_outline" data-tags="pause_circle_outline" d="M554 256.667v340h86v-340h-86zM512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM384 256.667v340h86v-340h-86z" />
<glyph unicode="&#xe01d;" glyph-name="play_circle_outline" data-tags="play_circle_outline" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM426 234.667v384l256-192z" />
<glyph unicode="&#xe033;" glyph-name="stack-2" data-tags="stack-2" d="M384 853.334h426.667q53 0 90.5-37.5t37.5-90.5v-426.667q0-53-37.5-90.5t-90.5-37.5h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 53 37.5 90.5t90.5 37.5zM170.667 675.334v-547.333q0-17.667 12.5-30.167t30.167-12.5h547.333q-13.333-37.667-46.333-61.5t-74.333-23.833h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 41.333 23.833 74.333t61.5 46.333zM810.667 768h-426.667q-17.667 0-30.167-12.5t-12.5-30.167v-426.667q0-17.667 12.5-30.167t30.167-12.5h426.667q17.667 0 30.167 12.5t12.5 30.167v426.667q0 17.667-12.5 30.167t-30.167 12.5z" />
<glyph unicode="&#xe070;" glyph-name="clear" data-tags="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
<glyph unicode="&#xe094;" glyph-name="arrow-left" data-tags="arrow-left" d="M426.667 768q17.667 0 30.167-12.5t12.5-30.167q0-18-12.667-30.333l-225.667-225.667h665q17.667 0 30.167-12.5t12.5-30.167-12.5-30.167-30.167-12.5h-665l225.667-225.667q12.667-12.333 12.667-30.333 0-17.667-12.5-30.167t-30.167-12.5q-18 0-30.333 12.333l-298.667 298.667q-12.333 13-12.333 30.333t12.333 30.333l298.667 298.667q12.667 12.333 30.333 12.333z" />
<glyph unicode="&#xe095;" glyph-name="arrow-right" data-tags="arrow-right" d="M597.333 768q18 0 30.333-12.333l298.667-298.667q12.333-12.333 12.333-30.333t-12.333-30.333l-298.667-298.667q-12.333-12.333-30.333-12.333-18.333 0-30.5 12.167t-12.167 30.5q0 18 12.333 30.333l226 225.667h-665q-17.667 0-30.167 12.5t-12.5 30.167 12.5 30.167 30.167 12.5h665l-226 225.667q-12.333 12.333-12.333 30.333 0 18.333 12.167 30.5t30.5 12.167z" />
<glyph unicode="&#xe0f2;" glyph-name="vertical_align_bottom" data-tags="vertical_align_bottom" d="M170 128.667h684v-86h-684v86zM682 384.667l-170-172-170 172h128v426h84v-426h128z" />
<glyph unicode="&#xe1ff;" glyph-name="apps" data-tags="apps" d="M682 84.667v172h172v-172h-172zM682 340.667v172h172v-172h-172zM426 596.667v172h172v-172h-172zM682 768.667h172v-172h-172v172zM426 340.667v172h172v-172h-172zM170 340.667v172h172v-172h-172zM170 84.667v172h172v-172h-172zM426 84.667v172h172v-172h-172zM170 596.667v172h172v-172h-172z" />
<glyph unicode="&#xe20c;" glyph-name="fullscreen" data-tags="fullscreen" d="M598 724.667h212v-212h-84v128h-128v84zM726 212.667v128h84v-212h-212v84h128zM214 512.667v212h212v-84h-128v-128h-84zM298 340.667v-128h128v-84h-212v212h84z" />
<glyph unicode="&#xe20d;" glyph-name="fullscreen_exit" data-tags="fullscreen_exit" d="M682 596.667h128v-84h-212v212h84v-128zM598 128.667v212h212v-84h-128v-128h-84zM342 596.667v128h84v-212h-212v84h128zM214 256.667v84h212v-212h-84v128h-128z" />
<glyph unicode="&#xe311;" glyph-name="zoom_in" data-tags="zoom_in" d="M512 512.667h-86v-86h-42v86h-86v42h86v86h42v-86h86v-42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
<glyph unicode="&#xe312;" glyph-name="zoom_out" data-tags="zoom_out" d="M298 554.667h214v-42h-214v42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
<glyph unicode="&#xe80d;" glyph-name="share" data-tags="share" d="M768 252.667c68 0 124-56 124-124s-56-126-124-126-124 58-124 126c0 10 0 20 2 28l-302 176c-24-22-54-34-88-34-70 0-128 58-128 128s58 128 128 128c34 0 64-12 88-34l300 174c-2 10-4 20-4 30 0 70 58 128 128 128s128-58 128-128-58-128-128-128c-34 0-64 14-88 36l-300-176c2-10 4-20 4-30s-2-20-4-30l304-176c22 20 52 32 84 32z" />
<glyph unicode="&#xe901;" glyph-name="facebook-with-circle" data-tags="facebook-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM628.429 612.659h-73.882c-8.755 0-18.483-11.52-18.483-26.829v-53.35h92.416l-13.978-76.083h-78.438v-228.403h-87.194v228.403h-79.104v76.083h79.104v44.749c0 64.205 44.544 116.378 105.677 116.378h73.882v-80.947z" />
<glyph unicode="&#xe902;" glyph-name="google-with-circle" data-tags="google+-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM483.686 249.805c-30.874-15.002-64.102-16.589-76.954-16.589-2.458 0-3.84 0-3.84 0s-1.178 0-2.765 0c-20.070 0-119.962 4.608-119.962 95.59 0 89.395 108.8 96.41 142.131 96.41h0.87c-19.251 25.702-15.258 51.61-15.258 51.61-1.69-0.102-4.147-0.205-7.168-0.205-12.544 0-36.762 1.997-57.549 15.411-25.498 16.384-38.4 44.288-38.4 82.893 0 109.107 119.142 113.51 120.32 113.613h118.989v-2.611c0-13.312-23.91-15.923-40.192-18.125-5.53-0.819-16.64-1.894-19.763-3.482 30.157-16.128 35.021-41.421 35.021-79.104 0-42.906-16.794-65.587-34.611-81.51-11.059-9.882-19.712-17.613-19.712-28.006 0-10.189 11.878-20.582 25.702-32.717 22.579-19.917 53.555-47.002 53.555-92.723 0-47.258-20.326-81.050-60.416-100.454zM742.4 460.8h-76.8v-76.8h-51.2v76.8h-76.8v51.2h76.8v76.8h51.2v-76.8h76.8v-51.2zM421.018 401.92c-2.662 0-5.325-0.102-8.038-0.307-22.733-1.69-43.725-10.189-58.88-24.013-15.053-13.619-22.733-30.822-21.658-48.179 2.304-36.403 41.37-57.702 88.832-54.323 46.694 3.379 77.824 30.31 75.571 66.714-2.15 34.202-31.898 60.109-75.827 60.109zM465.766 599.808c-12.39 43.52-32.358 56.422-63.386 56.422-3.328 0-6.707-0.512-9.933-1.382-13.466-3.84-24.166-15.053-30.106-31.744-6.093-16.896-6.451-34.509-1.229-54.579 9.472-35.891 34.97-61.901 60.672-61.901 3.379 0 6.758 0.41 9.933 1.382 28.109 7.885 45.722 50.79 34.048 91.802z" />
<glyph unicode="&#xe903;" glyph-name="pinterest-with-circle" data-tags="pinterest-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM545.638 344.32c-31.539 2.406-44.749 18.022-69.427 32.973-13.568-71.219-30.157-139.52-79.309-175.206-15.206 107.725 22.221 188.518 39.629 274.381-29.645 49.92 3.533 150.323 66.099 125.645 76.954-30.515-66.662-185.6 29.747-205.005 100.659-20.173 141.773 174.694 79.36 237.978-90.214 91.494-262.502 2.099-241.306-128.87 5.12-32 38.246-41.728 13.21-85.914-57.702 12.8-74.957 58.317-72.704 118.989 3.533 99.328 89.242 168.909 175.155 178.483 108.698 12.083 210.688-39.885 224.819-142.182 15.821-115.405-49.101-240.282-165.274-231.27z" />
<glyph unicode="&#xe904;" glyph-name="twitter-with-circle" data-tags="twitter-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM711.936 549.683c0.205-4.198 0.256-8.397 0.256-12.493 0-128-97.331-275.507-275.405-275.507-54.682 0-105.574 15.974-148.378 43.52 7.526-0.922 15.258-1.28 23.091-1.28 45.363 0 87.091 15.411 120.218 41.421-42.342 0.819-78.080 28.774-90.419 67.174 5.888-1.075 11.93-1.69 18.176-1.69 8.806 0 17.408 1.178 25.498 3.379-44.288 8.909-77.67 48.026-77.67 94.925v1.178c13.056-7.219 28.006-11.622 43.878-12.134-26.010 17.408-43.059 47.002-43.059 80.64 0 17.715 4.762 34.406 13.107 48.691 47.77-58.573 119.040-97.075 199.526-101.222-1.69 7.117-2.509 14.49-2.509 22.118 0 53.402 43.315 96.819 96.819 96.819 27.802 0 52.992-11.776 70.656-30.618 22.067 4.403 42.752 12.39 61.44 23.501-7.219-22.579-22.528-41.574-42.547-53.606 19.61 2.406 38.246 7.578 55.603 15.309-12.954-19.405-29.389-36.506-48.282-50.125z" />
</font></defs></svg>

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -0,0 +1,14 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by Fontastic.me</metadata>
<defs>
<font id="slick" horiz-adv-x="512">
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
</font></defs></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Binary file not shown.

@ -0,0 +1,883 @@
{
"version": "7",
"about": "This is a Prepros (https://prepros.io) configuration file. You can commit this file to a git repo to backup and sync project configurations.",
"config": {
"proxy": {
"enable": false,
"target": "",
"useLocalAssets": false
},
"reload": {
"enable": true,
"delay": 0,
"animate": true,
"afterUpload": false
},
"sync": {
"enable": false,
"mouse": true,
"keyboard": true,
"form": true,
"scroll": true
},
"watcher": {
"enable": true,
"maxFiles": 2000,
"usePolling": false,
"pollingInterval": 500,
"extensions": [
".html",
".htm",
".php"
],
"ignore": {
"patterns": [
".*",
"wp-admin",
"wp-includes",
"node_modules",
"Prepros Export",
"bower_components"
],
"exceptions": []
}
},
"exporter": {
"ignore": {
"patterns": [
".*",
"desktop.ini",
"prepros.cfg",
"node_modules",
"Prepros Export",
"prepros.config",
"prepros-6.config",
"*-original.jpg",
"*-original.jpeg",
"*-original.png",
"*-original.svg",
"*.scss",
"*.sass",
"*.less",
"*.pug",
"*.jade",
"*.styl",
"*.haml",
"*.slim",
"*.coffee",
"*.kit",
"*.turf",
"*.ts"
],
"exceptions": []
}
},
"uploader": {
"remotePath": "",
"timeout": 20000,
"autoUpload": false,
"reuseConnection": true,
"connectionType": "ftp",
"exportHistory": true,
"history": []
},
"packages": {
"createPackageLock": true
},
"images": {
"preserveOriginal": true
},
"tasks": {
"autoprefixer": {
"cascade": true,
"add": true,
"remove": true,
"supports": true,
"flexbox": true,
"grid": "autoplace",
"browsers": [
"last 2 versions"
],
"sourceMap": false
},
"babel": {
"sourceMap": false,
"presets": {
"@babel/preset-env": {
"enable": true,
"options": {
"targets": [
"last 2 versions"
],
"preserveImports": false,
"polyfills": false
}
},
"@babel/preset-react": true,
"@babel/preset-flow": false
},
"plugins": {
"@babel/plugin-proposal-class-static-block": false,
"@babel/plugin-proposal-class-properties": false,
"@babel/plugin-proposal-decorators": {
"enable": false,
"options": {
"decoratorsBeforeExport": true
}
},
"@babel/plugin-proposal-export-namespace-from": false,
"@babel/plugin-proposal-function-sent": false,
"@babel/plugin-proposal-logical-assignment-operators": false,
"@babel/plugin-proposal-nullish-coalescing-operator": false,
"@babel/plugin-proposal-numeric-separator": false,
"@babel/plugin-proposal-optional-chaining": false,
"@babel/plugin-proposal-private-methods": false,
"@babel/plugin-proposal-throw-expressions": false
},
"customPresets": [],
"customPlugins": []
},
"bundle-js": {
"sourceMap": false,
"exclude": [
"node_modules",
"bower_components"
],
"devMode": true,
"globals": [],
"externals": [],
"babel": {
"enable": true,
"options": {
"sourceMap": false,
"presets": {
"@babel/preset-env": {
"enable": true,
"options": {
"targets": [
"last 2 versions"
],
"preserveImports": false,
"polyfills": false
}
},
"@babel/preset-react": true,
"@babel/preset-flow": false
},
"plugins": {
"@babel/plugin-proposal-class-static-block": false,
"@babel/plugin-proposal-class-properties": false,
"@babel/plugin-proposal-decorators": {
"enable": false,
"options": {
"decoratorsBeforeExport": true
}
},
"@babel/plugin-proposal-export-namespace-from": false,
"@babel/plugin-proposal-function-sent": false,
"@babel/plugin-proposal-logical-assignment-operators": false,
"@babel/plugin-proposal-nullish-coalescing-operator": false,
"@babel/plugin-proposal-numeric-separator": false,
"@babel/plugin-proposal-optional-chaining": false,
"@babel/plugin-proposal-private-methods": false,
"@babel/plugin-proposal-throw-expressions": false
},
"customPresets": [],
"customPlugins": []
}
},
"css": {
"enable": true
}
},
"coffeescript": {
"header": false,
"bare": false,
"sourceMap": false
},
"command": {
"command": "",
"rootDir": ""
},
"concat-js": {
"sourceMap": false,
"rootDir": ""
},
"copy": {
"sourceMap": false
},
"dart-sass": {
"indentType": "space",
"allowWildcardImports": false,
"indentWidth": 2,
"linefeed": "lf",
"removeCharset": false,
"sourceMap": false
},
"haml": {
"doubleQuoteAttributes": true
},
"jpg": {
"quality": 90
},
"less": {
"javascriptEnabled": false,
"strictImports": false,
"insecure": false,
"math": "always",
"strictUnits": false,
"dumpLineNumbers": false,
"sourceMap": false
},
"markdown": {
"githubFlavored": true,
"wrapWithHtml": false
},
"minify-css": {
"sourceMap": false
},
"minify-html": {
"caseSensitive": false,
"collapseBooleanAttributes": true,
"collapseInlineTagWhitespace": false,
"collapseWhitespace": true,
"conservativeCollapse": false,
"decodeEntities": false,
"html5": true,
"includeAutoGeneratedTags": true,
"keepClosingSlash": false,
"minifyCSS": true,
"minifyJS": true,
"preserveLineBreaks": false,
"preventAttributesEscaping": false,
"processConditionalComments": false,
"removeAttributeQuotes": false,
"removeComments": true,
"removeEmptyAttributes": false,
"removeEmptyElement": false,
"removeOptionalTags": false,
"removeRedundantAttributes": false,
"removeScriptTypeAttributes": false,
"removeStyleLinkTypeAttributes": false,
"removeTagWhitespace": false,
"sortAttributes": false,
"sortClassName": false,
"useShortDoctype": true
},
"minify-js": {
"parse": {
"bare_returns": false
},
"compress": {
"arrows": true,
"arguments": false,
"booleans": true,
"booleans_as_integers": false,
"collapse_vars": true,
"comparisons": true,
"computed_props": true,
"conditionals": true,
"dead_code": true,
"directives": true,
"drop_console": false,
"drop_debugger": true,
"evaluate": true,
"expression": false,
"global_defs": [],
"hoist_funs": false,
"hoist_props": true,
"hoist_vars": false,
"if_return": true,
"inline": 3,
"join_vars": true,
"keep_fargs": true,
"keep_infinity": false,
"loops": true,
"negate_iife": true,
"properties": true,
"pure_funcs": [],
"pure_getters": false,
"reduce_funcs": true,
"reduce_vars": true,
"sequences": true,
"side_effects": true,
"switches": true,
"top_retain": [],
"typeofs": true,
"unsafe": false,
"unsafe_arrows": false,
"unsafe_comps": false,
"unsafe_Function": false,
"unsafe_math": false,
"unsafe_proto": false,
"unsafe_regexp": false,
"unsafe_undefined": false,
"unused": true
},
"mangle": {
"eval": false,
"reserved": []
},
"output": {
"ascii_only": false,
"braces": false,
"comments": "none",
"inline_script": true,
"keep_numbers": false,
"keep_quoted_props": false,
"preamble": null,
"quote_keys": false,
"quote_style": 0,
"semicolons": true,
"shebang": true,
"webkit": false,
"wrap_iife": false,
"wrap_func_args": true
},
"sourceMap": false,
"toplevel": false,
"ie8": false,
"keep_classnames": false,
"keep_fnames": false,
"safari10": false
},
"node-sass": {
"indentType": "space",
"allowWildcardImports": false,
"indentWidth": 2,
"linefeed": "lf",
"outputStyle": "expanded",
"precision": 10,
"sourceMap": false,
"removeCharset": false,
"sourceComments": false
},
"png": {
"quality": 90
},
"postcss-import": {
"ignoreKeywords": [],
"sourceMap": false
},
"postcss-preset-env": {
"stage": 2,
"browsers": [
"last 2 versions"
],
"sourceMap": false
},
"pug": {
"pretty": true
},
"slim": {
"indent": "space",
"indentSize": 2,
"pretty": true
},
"stylus": {
"useNib": true,
"sourceMap": false,
"linenos": false
},
"svg": {
"cleanupAttrs": true,
"removeDoctype": true,
"removeXMLProcInst": true,
"removeComments": true,
"removeMetadata": true,
"removeTitle": true,
"removeDesc": true,
"removeUselessDefs": true,
"removeEditorsNSData": true,
"removeEmptyAttrs": true,
"removeHiddenElems": true,
"removeEmptyText": true,
"removeEmptyContainers": true,
"removeViewBox": false,
"cleanupEnableBackground": true,
"convertStyleToAttrs": true,
"convertColors": true,
"convertPathData": true,
"convertTransform": true,
"removeUnknownsAndDefaults": true,
"removeNonInheritableGroupAttrs": true,
"removeUselessStrokeAndFill": true,
"removeUnusedNS": true,
"cleanupIDs": true,
"cleanupNumericValues": true,
"moveElemsAttrsToGroup": true,
"moveGroupAttrsToElems": true,
"collapseGroups": true,
"removeRasterImages": false,
"mergePaths": true,
"convertShapeToPath": true,
"sortAttrs": true,
"removeDimensions": true
},
"tailwindcss": {
"rootDir": "",
"content": [
"**/*.html",
"**/*.htm",
"**/*.php",
"**/*.js",
"!wp-admin",
"!wp-includes",
"!node_modules",
"!Prepros Export"
]
},
"turf": {
"rootDir": ""
}
},
"fileTypes": {
"sass": {
"extensions": [
".scss",
".sass"
],
"autoCompile": true,
"sourceMap": false,
"tasks": [
{
"task": "dart-sass",
"enable": true
},
{
"task": "autoprefixer",
"enable": true
},
{
"task": "minify-css",
"enable": false
}
],
"output": {
"extension": ".css",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "scss",
"replaceWith": "css"
},
{
"segment": "sass",
"replaceWith": "css"
}
]
}
},
"less": {
"extensions": [
".less"
],
"autoCompile": true,
"sourceMap": false,
"tasks": [
{
"task": "less",
"enable": true
},
{
"task": "autoprefixer",
"enable": true
},
{
"task": "minify-css",
"enable": false
}
],
"output": {
"extension": ".css",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "less",
"replaceWith": "css"
}
]
}
},
"pug": {
"extensions": [
".pug",
".jade"
],
"autoCompile": true,
"tasks": [
{
"task": "pug",
"enable": true
},
{
"task": "minify-html",
"enable": false
}
],
"output": {
"extension": ".html",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "pug",
"replaceWith": "html"
}
]
}
},
"css": {
"extensions": [
".css"
],
"autoCompile": false,
"sourceMap": false,
"tasks": [
{
"task": "copy",
"enable": true
},
{
"task": "tailwindcss",
"enable": false
},
{
"task": "postcss-import",
"enable": false
},
{
"task": "postcss-preset-env",
"enable": false
},
{
"task": "autoprefixer",
"enable": true
},
{
"task": "minify-css",
"enable": true
}
],
"output": {
"extension": ".css",
"type": "SOURCE_RELATIVE",
"relativePath": "",
"suffix": "-dist",
"alwaysSuffix": false
}
},
"javascript": {
"extensions": [
".js",
".jsx"
],
"autoCompile": false,
"sourceMap": false,
"tasks": [
{
"task": "copy",
"enable": true
},
{
"task": "concat-js",
"enable": false
},
{
"task": "babel",
"enable": false
},
{
"task": "bundle-js",
"enable": false
},
{
"task": "minify-js",
"enable": true
}
],
"output": {
"extension": ".js",
"type": "SOURCE_RELATIVE",
"relativePath": "",
"suffix": "-dist",
"alwaysSuffix": false
}
},
"stylus": {
"extensions": [
".styl"
],
"autoCompile": true,
"sourceMap": false,
"tasks": [
{
"task": "stylus",
"enable": true
},
{
"task": "autoprefixer",
"enable": true
},
{
"task": "minify-css",
"enable": false
}
],
"output": {
"extension": ".css",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "stylus",
"replaceWith": "css"
},
{
"segment": "styl",
"replaceWith": "css"
}
]
}
},
"markdown": {
"extensions": [
".md",
".markdown",
".mkd"
],
"autoCompile": false,
"tasks": [
{
"task": "markdown",
"enable": true
},
{
"task": "minify-html",
"enable": false
}
],
"output": {
"extension": ".html",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "markdown",
"replaceWith": "html"
}
]
}
},
"haml": {
"extensions": [
".haml"
],
"autoCompile": true,
"tasks": [
{
"task": "haml",
"enable": true
},
{
"task": "minify-html",
"enable": false
}
],
"output": {
"extension": ".html",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "haml",
"replaceWith": "html"
}
]
}
},
"slim": {
"extensions": [
".slim"
],
"autoCompile": true,
"tasks": [
{
"task": "slim",
"enable": true
},
{
"task": "minify-html",
"enable": false
}
],
"output": {
"extension": ".html",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "slim",
"replaceWith": "html"
}
]
}
},
"coffeescript": {
"extensions": [
".coffee"
],
"autoCompile": true,
"sourceMap": false,
"tasks": [
{
"task": "coffeescript",
"enable": true
},
{
"task": "babel",
"enable": false
},
{
"task": "bundle-js",
"enable": false
},
{
"task": "minify-js",
"enable": false
}
],
"output": {
"extension": ".js",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "coffee-script",
"replaceWith": "js"
},
{
"segment": "coffeescript",
"replaceWith": "js"
},
{
"segment": "coffee",
"replaceWith": "js"
}
]
}
},
"turf": {
"extensions": [
".turf",
".kit"
],
"autoCompile": true,
"tasks": [
{
"task": "turf",
"enable": true
},
{
"task": "minify-html",
"enable": false
}
],
"output": {
"extension": ".html",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "turf",
"replaceWith": "html"
}
]
}
},
"typescript": {
"extensions": [
".ts",
".tsx"
],
"autoCompile": true,
"sourceMap": false,
"tasks": [
{
"task": "copy",
"enable": true
},
{
"task": "babel",
"enable": true
},
{
"task": "bundle-js",
"enable": false
},
{
"task": "minify-js",
"enable": false
}
],
"output": {
"extension": ".js",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "typescript",
"replaceWith": "js"
},
{
"segment": "ts",
"replaceWith": "js"
}
]
}
},
"jpg": {
"extensions": [
".jpg",
".jpeg"
],
"tasks": [
{
"task": "jpg",
"enable": true
}
],
"output": {
"extension": ".jpg",
"type": "SOURCE_RELATIVE",
"relativePath": ""
}
},
"png": {
"extensions": [
".png"
],
"tasks": [
{
"task": "png",
"enable": true
}
],
"output": {
"extension": ".png",
"type": "SOURCE_RELATIVE",
"relativePath": ""
}
},
"svg": {
"extensions": [
".svg"
],
"tasks": [
{
"task": "svg",
"enable": true
}
],
"output": {
"extension": ".svg",
"type": "SOURCE_RELATIVE",
"relativePath": ""
}
}
},
"files": []
}
}

@ -0,0 +1,111 @@
//===
$heightObj: (
basic: 45px
);
//===
$gutter: (
basic: 20px,
double: 40px
);
//
$radius: (
basic: 3px
);
//
$basicColor: (
skyBlue:#b2c4ce,
moBlue:#486499,
darkBlue:#345068,
pink:#fdebeb,
cherry:#E31D64,
mintGreen:#f2f8e7,
limeGreen:#94ac5e,
tomatoRed:#F84E59,
earthGold:#BC9F75,
silver:#eeeeee,
gray:#b1b3b6
);
$textArr:
(skyBlue, map-get($basicColor, skyBlue)),
(moBlue, map-get($basicColor, moBlue)),
(darkBlue, map-get($basicColor, darkBlue)),
(pink, map-get($basicColor, pink)),
(cherry, map-get($basicColor, cherry)),
(mintGreen, map-get($basicColor, mintGreen)),
(limeGreen, map-get($basicColor, limeGreen)),
(tomatoRed, map-get($basicColor, tomatoRed)),
(earthGold, map-get($basicColor, earthGold)),
(silver, map-get($basicColor, silver)),
(gray, map-get($basicColor, gray)),
;
//button
@each $class, $color in $textArr {
.text-#{"" + $class} {
color: $color !important;
}
.bg-#{"" + $class} {
background-color: $color !important;
}
.bd-#{"" + $class} {
border-style: solid;
border-color: $color !important;
}
}
//======extand
%centerFlex {
display: flex;
justify-content: center;
align-items: center;
}
%bwtFlex {
display: flex;
justify-content: space-between;
align-items: center;
}
%posCenter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
%resetForm {
appearance: none;
}
%clearFix {
&:after {
content: '';
display: block;
clear: both;
}
}
//========mixin
@mixin size($w, $h:$w) {
width: $w;
height: $h;
}
@mixin basicSize($w, $h) {
min-width: $w;
min-height: $h;
}
//margin padding
@mixin elGutter($key, $value) {
#{$key}: $value;
&:last-child {
#{$key}: 0;
}
}

@ -0,0 +1,138 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans TC', "微軟正黑體", "Microsoft JhengHei", sans-serif;
font-size: 14px;
line-height: 1.5;
margin: 0;
padding: 0;
color: #666;
background-color: #ffffff;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a,
span {
display: inline-block;
}
button,a{
border-width: 1px;
outline: none !important;
cursor: pointer;
&:focus {
outline: none;
box-shadow: none !important;
}
}
a,
a:hover,
a:focus {
color: #37455E;
text-decoration: none;
outline: none;
}
ul{
margin:0;
padding:0;
padding-left: 20px;
li{
list-style:none;
}
}
textarea{
min-height: 200px;
}
hr{
margin: 15px 0;
&.dashed{
border-style: dashed;
margin: 25px 0;
}
}
.left {
float: left;
}
.rel {
position: relative;
}
.ellipsis{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-wrap: break-word;
&.e2{-webkit-line-clamp: 2;}
&.e3{-webkit-line-clamp: 3;}
&.e4{-webkit-line-clamp: 4;}
&.e5{-webkit-line-clamp: 5;}
&.e6{-webkit-line-clamp: 6;}
}
.centerFlex {
display: flex;
justify-content: center;
align-items: center;
}
.bwtFlex {
display: flex;
justify-content: space-between;
align-items: center;
}
h1,h2,h3,h4,h5,h6{margin:0;}
// h2{font-size: 4rem;}
// h3{font-size: 3.4rem;line-height: 0.9em;}
// h4{font-size: 2.2rem;}
// h5{font-size: 1.8rem;}
// h6{font-size: 1.4rem;}

@ -0,0 +1,46 @@
$normalArr:
(moBlue, #fff, map-get($basicColor, moBlue), map-get($basicColor, moBlue)),
(pink, #fff, map-get($basicColor, pink), map-get($basicColor, pink)),
(cherry, #fff, map-get($basicColor, cherry), map-get($basicColor, cherry)),
(limeGreen, #fff, map-get($basicColor, limeGreen), map-get($basicColor, limeGreen)),
(tomatoRed, #fff, map-get($basicColor, tomatoRed), map-get($basicColor, tomatoRed)),
(earthGold, #fff, map-get($basicColor, earthGold), map-get($basicColor, earthGold)),
;
$outlineArr:
(moBlue, 1px, map-get($basicColor, moBlue), transparent, map-get($basicColor, moBlue)),
(pink, 1px, map-get($basicColor, pink), transparent, map-get($basicColor, pink)),
(cherry, 1px, map-get($basicColor, cherry), transparent, map-get($basicColor, cherry)),
(limeGreen, 1px, map-get($basicColor, limeGreen), transparent, map-get($basicColor, limeGreen)),
(tomatoRed, 1px, map-get($basicColor, tomatoRed), transparent, map-get($basicColor, tomatoRed)),
(earthGold, 1px, map-get($basicColor, earthGold), transparent, map-get($basicColor, earthGold)),
;
//button
@each $class, $color, $bgColor, $border in $normalArr {
.btn-#{"" + $class} {
@include normalBtn($color, $bgColor, $border);
}
}
//
@each $class, $bdWidth, $color, $bgColor, $bdColor in $outlineArr {
.btn-outline-#{"" + $class} {
@include outlineBtn($bdWidth, $color, $bgColor, $bdColor);
}
}
.btn-outline-limeGreen {
&.active {
color: #fff;
background-color: #b4d26c;
}
&.disabled {
cursor: not-allowed;
&:hover {
background-color: #fff;
color: #b4d26c;
}
}
}

@ -0,0 +1,35 @@
%button {
border-radius: map-get($radius, basic);
&.limit{
width:200px;
}
}
//button
@mixin normalBtn($color, $bgColor, $bdColor) {
@extend %button;
@if $bdColor == none {
border: none;
} @else {
border: 1px solid $bdColor !important;
}
color: $color;
background-color: $bgColor;
&:hover{
color:#fff;
background-color: darken($bgColor, 10%);
}
}
// button
@mixin outlineBtn($bdWidth, $color, $bgColor, $bdColor) {
@extend %button;
border: $bdWidth solid $bdColor;
color: $color;
background-color: $bgColor;
&:hover{
color:#fff;
background-color: $color;
}
}

@ -0,0 +1,18 @@
[v-cloak] {
display: none;
}
.home{
background-color: #f1e6e2;
}
.imgCnt{
position: relative;
overflow: hidden;
img{
width:100%;
height:100%;
object-fit: cover;
transition: all .3s;
}
}

@ -0,0 +1,17 @@
.header{
position: relative;
width:100%;
text-align: center;
padding: 15px 0;
background-color: #345068;
.uname {
color: #fff;
margin-bottom: 5px;
font-weight: bold;
}
.umoney {
color: #fff;
opacity: .6;
}
}

@ -0,0 +1,18 @@
// @import './bootstrap/bootstrap';
@import './base/global';
@import './base/reset';
@import './components/button';
@import './components/btn';
@import './layout/navbar';
@import './layout/layout';
@import './venders/vender';

@ -0,0 +1,83 @@
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap');
.my-account {
position: relative;
width: 100%;
padding: 20px;
.avatar{
display: flex;
align-items: center;
.imgCnt{
width:80px;
height: 80px;
min-width: 80px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
img{
width:100%;
height: 100%;
object-fit: cover;
}
}
.info{
.name{
font-size: 20px;
font-weight: bold;
color: #303a47;
}
.conpany{
font-size: 15px;
}
}
}
.recommend{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0 10px;
.btn{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width:30%;
height: 100px;
background-color: #fff;
border: 1px #96989a solid;
border-radius: 0;
.img{
font-size: 35px;
color: #303a47;
}
.text{
font-weight: bold;
color: #303a47;
}
}
}
}
.content{
padding: 15px;
background-color: #b2c4ce;
.card {
border: none;
border-radius: 0;
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #8d8d8d;
font-size: 15px;
i,svg{
color: #839eb6;
}
}
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,6 @@
@import './font-awesome.min.scss';
// @import './lightgallery.scss';
// @import './slick.scss';
// @import './slick-theme.scss';
@import './swiper.scss';
// @import './animate.min.scss';

@ -6,7 +6,7 @@ import store from "./store";
import liff from '@line/liff'; import liff from '@line/liff';
import { VueClipboard } from "@soerenmartius/vue3-clipboard"; import { VueClipboard } from "@soerenmartius/vue3-clipboard";
import "@/assets/css/normalize.css"; // import "@/assets/css/normalize.css";
import "@/assets/css/common.less"; import "@/assets/css/common.less";
// import './registerServiceWorker' // import './registerServiceWorker'

@ -12,7 +12,7 @@ import { showToast,showSuccessToast } from 'vant';
import { Dialog } from 'vant'; import { Dialog } from 'vant';
import Footer from '@/components/Footer.vue' // import Footer from '@/components/Footer.vue'
import { login, bindCard } from '@/api' import { login, bindCard } from '@/api'
@ -200,137 +200,146 @@ const handleLogout = () => {
</script> </script>
<template> <template>
<div class="home" v-cloak> <div class="home" v-cloak>
<div class="my-account"> <div class="header">
<div class="account-bg set_up"> <h4 class="uname">UTEL電子名片系統</h4>
<img src="@/assets/images/topbg.png" /> <a href="javascript:;"><h5 class="umoney phone">歡迎來到會員中心</h5></a>
</div>
<div class="avatar_box set_up">
<img class="avater" :src="userInfo.line_picture || import('@/assets/images/user.jpg')" />
</div>
<div class="user-info">
<p class="uname set_up">UTel電子名片系統</p>
<a href="javascript:;">
<p class="umoney phone">歡迎來到會員中心</p>
</a>
</div>
<div class="set" @click="handleLogout">
<a href="javascript:void(0)">登出</a>
</div>
</div> </div>
<div class="recommend">
<ul> <van-notice-bar color="#ffffff" background="#e05338" left-icon="info-o" mode="link">測試文字測試文字測試文字測試文字測試文字測試文字</van-notice-bar>
<li @click="router.push('/member')">
<p>修改資料</p> <div class="my-account">
<span>修改名片資料</span> <div class="row align-items-center gx-0">
</li> <div class="col">
<li @click="goCardEdit"> <div class="avatar">
<p>商務卡片</p> <div class="imgCnt">
<span>設計專屬名片</span> <img :src="userInfo.line_picture || import('@/assets/images/user.jpg')" />
</li> </div>
<li @click="router.push('/shop')"> <div class="info">
<p>立即購買</p> <div class="name">{{ userInfo.real_name }}</div>
<span>付費開通方案</span> <div class="conpany">{{ userInfo.company }}</div>
</li> </div>
<li @click="handleShowNfc">
<p>展示二維碼</p>
<span>提供好友掃描</span>
</li>
</ul>
</div>
<dl class="dl02" v-if="userInfo">
<a href="javascript:;">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-01.png" />
<div class="left">建立日期</div>
<div class="right">{{ userInfo.create_time }}</div>
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-02.png" />
<div class="left">會員編號</div>
<div class="right">{{ userInfo.user_id }}
<span class="cp-btn" @click="doCopyUid"></span>
</div> </div>
<div style="clear: both"></div>
</div> </div>
</a> <div class="col-auto">
<a href="javascript:;"> <div class="btn" @click="handleLogout"><h4><i class="fa fa-share-alt" aria-hidden="true"></i></h4></div>
<div class="menu"> <div class="btn" @click="handleLogout"><h4><i class="fa fa-sign-out" aria-hidden="true"></i></h4></div>
<img class="titleImg" src="@/assets/images/icon-02.png" />
<div class="left">公司名稱</div>
<div class="right">{{ userInfo.company }}</div>
<div style="clear: both"></div>
</div> </div>
</a> </div>
<a href="javascript:;"> <div class="recommend">
<div class="menu"> <div class="btn btn-outline-moBlue" @click="router.push('/shop')">
<img class="titleImg" src="@/assets/images/icon-03.png" /> <div class="img"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i></div>
<div class="left">姓名</div> <h6 class="text">立即開通</h6>
<div class="right">{{ userInfo.real_name }}</div>
<div style="clear: both"></div>
</div> </div>
</a> <div class="btn btn-outline-moBlue" @click="goCardEdit">
<a href="javascript:;"> <div class="img"><i class="fa fa-id-card-o" aria-hidden="true"></i></div>
<div class="menu"> <h6 class="text">商務卡片</h6>
<img class="titleImg" src="@/assets/images/icon-04.png" />
<div class="left">會員等級</div>
<div class="right">{{ userInfo.level_name }}</div>
<div style="clear: both"></div>
</div> </div>
</a> <div class="btn btn-outline-moBlue">
<a href="javascript:;"> <div class="img"><i class="fa fa-address-book-o" aria-hidden="true"></i></div>
<div class="menu"> <h6 class="text">通訊錄</h6>
<img class="titleImg" src="@/assets/images/icon-05.png" />
<div class="left">使用期限</div>
<div class="right">{{ overdue }}</div>
<!-- <div class="right" @click="router.push('/shop/inputsn')" v-if="!is_due">{{overdue}}<br/>點此輸入購買序號</div>
<div class="right input-sn" @click="router.push('/shop/inputsn')" v-else>,<br/>點此輸入購買序號</div> -->
<div style="clear: both"></div>
</div> </div>
</a> </div>
<a href="javascript:;"> </div>
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-06.png" />
<div class="left">名片連結</div>
<div class="right" style="color: #fe6867" @click="doCopy"> <div class="content">
點擊複製您的連結 <div class="card" v-if="userInfo">
<div class="container">
<div class="row item">
<div class="col-auto">
<h6 class="font-weight-bold"><i class="fa fa-address-book-o" aria-hidden="true"></i> 建立日期</h6>
</div>
<div class="col text-right">
{{ userInfo.create_time }}
</div>
</div> </div>
<div style="clear: both"></div> <div class="row item">
</div> <div class="col-auto">
</a> <h6 class="font-weight-bold"><i class="fa fa-address-book-o" aria-hidden="true"></i> 會員編號</h6>
<a href="javascript:;"> </div>
<div class="menu" @click="$router.push('/auth/auth')"> <div class="col text-right">
<img class="titleImg" src="@/assets/images/icon-04.png" /> {{ userInfo.user_id }}<span class="cp-btn" @click="doCopyUid"></span>
<div class="left">授權商務卡片編輯</div> </div>
<div class="right">授權</div>
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;" @click="$router.push('/auth/getauth')">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-04.png" />
<div class="left">代客編輯商務卡片</div>
<div class="right">編輯</div>
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;" v-if="userInfo.uniqid">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-06.png" />
<div class="left">綁定UTel淘金購會員</div>
<div class="right" style="color: #fe6867" @click="bindTggo">
點擊後前往綁定
</div> </div>
<div style="clear: both"></div>
</div> </div>
</a>
</dl> <a href="javascript:;" class="item">
<Footer /> <div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 公司名稱</h6></div>
<div class="col text-right">
{{ userInfo.company }}
</div>
</div>
</a>
<a href="javascript:;" class="item">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 姓名</h6></div>
<div class="col text-right">
{{ userInfo.real_name }}
</div>
</div>
</a>
<a href="javascript:;" class="item">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 會員等級</h6></div>
<div class="col text-right">
{{ userInfo.level_name }}
</div>
</div>
</a>
<a href="javascript:;" class="item">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 使用期限</h6></div>
<div class="col text-right">
{{ overdue }}
</div>
<!-- <div class="col text-right" @click="router.push('/shop/inputsn')" v-if="!is_due">{{overdue}}<br/>點此輸入購買序號</div>
<div class="col text-right input-sn" @click="router.push('/shop/inputsn')" v-else>,<br/>點此輸入購買序號</div> -->
</div>
</a>
<a href="javascript:;" class="item">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 名片連結</h6></div>
<div class="col text-right" style="color: #fe6867" @click="doCopy">
點擊複製您的連結
</div>
</div>
</a>
<a href="javascript:;" class="item" @click="$router.push('/auth/auth')">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 授權商務卡片編輯</h6></div>
<div class="col text-right">
授權
</div>
</div>
</a>
<a href="javascript:;" class="item" @click="$router.push('/auth/getauth')">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 代客編輯商務卡片</h6></div>
<div class="col text-right">
編輯
</div>
</div>
</a>
<a href="javascript:;" class="item" v-if="userInfo.uniqid">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 綁定UTel淘金購會員</h6></div>
<div class="col text-right" style="color: #fe6867" @click="bindTggo">
點擊後前往綁定
</div>
</div>
</a>
</div>
</div>
<!-- <Footer /> -->
<van-dialog v-model:show="showNfcQrcode" title="電子名片二維碼" :show-cancel-button="true" cancel-button-text="" <van-dialog v-model:show="showNfcQrcode" title="電子名片二維碼" :show-cancel-button="true" cancel-button-text=""
:show-confirm-button="false"> :show-confirm-button="false">
<div class="qrcode"> <div class="qrcode">
@ -349,99 +358,9 @@ const handleLogout = () => {
</div> </div>
</template> </template>
<style src="@/assets/css/style.css"></style> <style src="@/assets/css/main.css"></style>
<style lang="less" scoped> <style src="@/assets/css/page/index.css"></style>
[ v-cloak] {
display: none;
}
.recommend {
width: 100%;
padding-top: 2%;
}
.recommend ul {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recommend ul li {
box-sizing: content-box;
width: 44%;
height: 50px;
padding: 2%;
display: flex;
flex-direction: column;
margin: 1%;
-webkit-box-shadow: 0 0 2px #fdaf00;
-moz-box-shadow: 0 0 2px #fdaf00;
box-shadow: 0 0 2px #fdaf00;
}
.recommend ul li p {
margin-top: 2%;
font-size: 15px;
color: #333;
}
.recommend ul li span {
font-size: 14px !important;
color: #999 !important;
padding-top: 0.15rem !important;
}
.recommend ul li:nth-child(1) {
background: url(@/assets/images/icon-001.png) right 0.3rem center no-repeat #fff !important;
background-size: 30px !important;
}
.recommend ul li:nth-child(2) {
background: url(@/assets/images/icon-002.png) right 0.3rem center no-repeat #fff !important;
background-size: 30px !important;
}
.recommend ul li:nth-child(3) {
background: url(@/assets/images/icon-003.png) right 0.3rem center no-repeat #fff !important;
background-size: 30px !important;
}
.recommend ul li:nth-child(4) {
background: url(@/assets/images/icon-004.png) right 0.3rem center no-repeat #fff !important;
background-size: 30px !important;
}
.qrcode {
text-align: center;
}
.input-sn {
color: red !important;
}
.cp-btn {
border: #999 1px solid;
padding: 2px;
color: rgb(254, 104, 103);
}
.wrapper{ <style lang="less" scoped>
display: flex;
align-items: center;
height: 100%;
.block{
position:absolute;
color:#ffffff;
border-radius:50%;
top:10px;
right:10px;
margin-left:auto;
.van-icon{
cursor: pointer;
}
}
}
</style> </style>

@ -0,0 +1,449 @@
<script setup>
import moment from 'moment'
import QrcodeVue from 'qrcode.vue'
import { useCountDown } from '@vant/use';
import { toClipboard } from '@soerenmartius/vue3-clipboard'
import { ref, computed, onBeforeMount, nextTick, inject } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { showToast,showSuccessToast } from 'vant';
import { Dialog } from 'vant';
// import Footer from '@/components/Footer.vue'
import { login, bindCard } from '@/api'
const router = useRouter()
const route = useRoute()
const store = useStore()
const popShow = ref(true)
const showShare = ref(false)
const showNfcQrcode = ref(false)
const imageUrl = ref(import.meta.env.VITE_APP_IMAGE_URL)
const userLevel = {
0: '基礎款',
1: '標準款',
2: '自製款',
3: '客製款'
}
const is_due = ref(false)
// 使useCountDown
const countDown = useCountDown({time: 1 * 1000});
const current = countDown.current;
countDown.start();
onBeforeMount(async () => {
const liff = window.liff;
try {
if (!liff.isLoggedIn())
liff.login({ redirectUri: window.location.href });
} catch (err) {
console.log(`liff.state init error ${err}`);
showToast('登入失敗。請聯絡管理員')
router.push('/login')
}
if (!sessionStorage.getItem('token')) {
const profile = await liff.getProfile()
const id_token = liff.getIDToken()
let loginRes = await login({ line_id: profile.userId, token: id_token })
if (loginRes.code === 200) {
if (route.query.act === 'openright') {
showToast('您已經是本站會員')
}
sessionStorage.setItem('token', loginRes.data.token)
sessionStorage.setItem('uid', loginRes.data.uid)
} else if (loginRes.code === 202) {
if (route.query.act === 'openright') {
if (route.query.verify) {
//
Dialog.confirm({
title: '卡片綁定',
message: '確認是否綁定這張卡片'
}).then(async () => {
//
let bindRes = await bindCard({ uid: loginRes.data.uid, verify: route.query.verify })
if (bindRes.code === 200) {
showSuccessToast('綁定成功')
} else {
showToast.fail('綁定失敗')
}
}).catch(() => {
})
}
}
sessionStorage.setItem('token', loginRes.data.token)
sessionStorage.setItem('uid', loginRes.data.uid)
} else if (loginRes.code === 201) {
if (route.query.act === 'openright') {
if (route.query.verify) {
router.push({
path: '/register',
query: {
verify: route.query.verify
}
})
return
}
} else if (route.query.aid) {
router.push({
path: '/register',
query: {
aid: route.query.aid
}
})
return
} else {
showToast('請先註冊成為本站會員')
return router.push({
path: '/register',
query: { refer: route.query.refer }
})
}
} else {
showToast('登入失敗。請聯絡管理員')
router.push('/login')
}
}
store.dispatch('user/getUserInfo')
//
nextTick(() => {
// if(userInfo.value.level===0 && userInfo.value.nc_type===0){
// showToast('')
// return router.push('/shop/inputsn')
// }
})
})
const userInfo = computed(() => {
return store.state.user.userInfo
})
const nfcurl = computed(() => {
return encodeURI(store.state.user.userInfo.ufcurl)
})
const overdue = computed(() => {
if (store.state.user.userInfo.overdue_time > 0) {
return moment.unix(store.state.user.userInfo.overdue_time).format('YYYY-MM-DD')
} else {
return '無期限'
}
})
const goCardEdit = () => {
if (userInfo.value.nc_type < 2) {
router.push('/card/notice')
} else {
router.push('/card/edit')
}
}
const onSelect = (option) => {
showToast(option.name);
showShare.value = false;
};
const handleShowNfc = () => {
showNfcQrcode.value = true
}
const doCopy = () => {
toClipboard(userInfo.value.nfcurl)
showToast('已放入剪貼簿')
}
const doCopyUid = () => {
toClipboard(userInfo.value.user_id)
showToast('已放入剪貼簿')
}
const bindTggo = () => {
console.log(userInfo.value)
let url = `https://www.tggo.com.tw/u.cgi?&mnm=mybinding&ncode=${userInfo.value.uniqid}&name=${userInfo.value.real_name}&openExternalBrowser=1`;
window.open(url, '_blank');
}
const handleLogout = () => {
if (liff.isLoggedIn()) {
liff.logout();
}
sessionStorage.removeItem('token')
sessionStorage.removeItem('uid')
router.push('/login')
}
</script>
<template>
<div class="home" v-cloak>
<div class="my-account">
<div class="account-bg">
<img src="@/assets/images/topbg.png" />
</div>
<div class="avatar_box">
<img class="avater" :src="userInfo.line_picture || import('@/assets/images/user.jpg')" />
</div>
<div class="user-info">
<p class="uname">UTel電子名片系統</p>
<a href="javascript:;">
<p class="umoney phone">歡迎來到會員中心</p>
</a>
</div>
<div class="set" @click="handleLogout">
<a href="javascript:void(0)">登出</a>
</div>
</div>
<div class="recommend">
<ul>
<li @click="router.push('/member')">
<p>修改資料</p>
<span>修改名片資料</span>
</li>
<li @click="goCardEdit">
<p>商務卡片</p>
<span>設計專屬名片</span>
</li>
<li @click="router.push('/shop')">
<p>立即購買</p>
<span>付費開通方案</span>
</li>
<li @click="handleShowNfc">
<p>展示二維碼</p>
<span>提供好友掃描</span>
</li>
</ul>
</div>
<dl class="dl02" v-if="userInfo">
<a href="javascript:;">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-01.png" />
<div class="left">建立日期</div>
<div class="right">{{ userInfo.create_time }}</div>
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-02.png" />
<div class="left">會員編號</div>
<div class="right">{{ userInfo.user_id }}
<span class="cp-btn" @click="doCopyUid"></span>
</div>
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-02.png" />
<div class="left">公司名稱</div>
<div class="right">{{ userInfo.company }}</div>
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-03.png" />
<div class="left">姓名</div>
<div class="right">{{ userInfo.real_name }}</div>
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-04.png" />
<div class="left">會員等級</div>
<div class="right">{{ userInfo.level_name }}</div>
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-05.png" />
<div class="left">使用期限</div>
<div class="right">{{ overdue }}</div>
<!-- <div class="right" @click="router.push('/shop/inputsn')" v-if="!is_due">{{overdue}}<br/>點此輸入購買序號</div>
<div class="right input-sn" @click="router.push('/shop/inputsn')" v-else>,<br/>點此輸入購買序號</div> -->
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-06.png" />
<div class="left">名片連結</div>
<div class="right" style="color: #fe6867" @click="doCopy">
點擊複製您的連結
</div>
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;">
<div class="menu" @click="$router.push('/auth/auth')">
<img class="titleImg" src="@/assets/images/icon-04.png" />
<div class="left">授權商務卡片編輯</div>
<div class="right">授權</div>
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;" @click="$router.push('/auth/getauth')">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-04.png" />
<div class="left">代客編輯商務卡片</div>
<div class="right">編輯</div>
<div style="clear: both"></div>
</div>
</a>
<a href="javascript:;" v-if="userInfo.uniqid">
<div class="menu">
<img class="titleImg" src="@/assets/images/icon-06.png" />
<div class="left">綁定UTel淘金購會員</div>
<div class="right" style="color: #fe6867" @click="bindTggo">
點擊後前往綁定
</div>
<div style="clear: both"></div>
</div>
</a>
</dl>
<!-- <Footer /> -->
<van-dialog v-model:show="showNfcQrcode" title="電子名片二維碼" :show-cancel-button="true" cancel-button-text=""
:show-confirm-button="false">
<div class="qrcode">
<qrcode-vue :value="userInfo.nfcurl" :size="200" level="M" />
</div>
</van-dialog>
<van-overlay :show="popShow" z-index="1000" :style="{background:'rgba(0, 0, 0, .85)'}">
<div class="wrapper" @click.stop>
<div class="block">
<span class="van-icon van-icon-cross" @click="popShow = false" v-show="current.seconds == 0"></span>
{{ current.seconds }}
</div>
<iframe width="100%" style="aspect-ratio: 16/9;" src="https://www.youtube.com/embed/dUro-rg2Uz8?si=K5lDwRcM1NfNCEUR" title="YouTube video player" frameborder="0" controls="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</van-overlay>
</div>
</template>
<style src="@/assets/css/style.css"></style>
<style lang="less" scoped>
[ v-cloak] {
display: none;
}
.recommend {
width: 100%;
padding-top: 2%;
}
.recommend ul {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recommend ul li {
box-sizing: content-box;
width: 44%;
height: 50px;
padding: 2%;
display: flex;
flex-direction: column;
margin: 1%;
-webkit-box-shadow: 0 0 2px #fdaf00;
-moz-box-shadow: 0 0 2px #fdaf00;
box-shadow: 0 0 2px #fdaf00;
}
.recommend ul li p {
margin-top: 2%;
font-size: 15px;
color: #333;
}
.recommend ul li span {
font-size: 14px !important;
color: #999 !important;
padding-top: 0.15rem !important;
}
.recommend ul li:nth-child(1) {
background: url(@/assets/images/icon-001.png) right 0.3rem center no-repeat #fff !important;
background-size: 30px !important;
}
.recommend ul li:nth-child(2) {
background: url(@/assets/images/icon-002.png) right 0.3rem center no-repeat #fff !important;
background-size: 30px !important;
}
.recommend ul li:nth-child(3) {
background: url(@/assets/images/icon-003.png) right 0.3rem center no-repeat #fff !important;
background-size: 30px !important;
}
.recommend ul li:nth-child(4) {
background: url(@/assets/images/icon-004.png) right 0.3rem center no-repeat #fff !important;
background-size: 30px !important;
}
.qrcode {
text-align: center;
}
.input-sn {
color: red !important;
}
.cp-btn {
border: #999 1px solid;
padding: 2px;
color: rgb(254, 104, 103);
}
.wrapper{
display: flex;
align-items: center;
height: 100%;
.block{
position:absolute;
color:#ffffff;
border-radius:50%;
top:10px;
right:10px;
margin-left:auto;
.van-icon{
cursor: pointer;
}
}
}
</style>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save