Merge branch 'master' of http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template

08335 / hivui-platform-template

hivui平台项目模板

Browse code Merge branch 'master' of http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template master
commit 20a817fb808d837f253bccd69518b97ff2080081 2 parents a812d1b + 50acc16 12112 authored on 29 Sep 2021

Showing 7 changed files

Ignore Space Show notes View build/bin/create.sh
#!/bin/bash ## 权限问题，用 chmod u+x .sh ## eg: ## cd /mobileproject/$1/XcxProject hivui create $1 if [ $# != 3 ] ; then echo "创建项目的参数不正确，请输入（用户ID，项目名，预览端口）" exit 1 fi # basePath='/opt/eap5/desktop' basePath='/eap5.0/desktop' tagPath=$basePath'/preview' # tmpPath=$basePath'/project-template' tmpPath='/eap5.0/hiruntime/project/desktop/project-template' workName=$1 projectName=$2 port=$3 source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t<!--预览时公共库-->' source[1]='\n\t<script src="\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[2]='\n\t<%}%>' source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t<!--发布时公共库-->' source[4]='\n\t<script src="\/${serverName}\/render\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[5]='\n\t<%}%>\n' # echo 's/<\/head>/'${source[]}'<\/head>/g' # exit 1; ## 参数工号$1 项目名$2 端口$3 ## 工号=工作空间 ## 1、判断工作空间没有就创建 if [ ! -d "${tagPath}/${workName}" ];then mkdir "${tagPath}/${workName}" fi ## 2、判断项目名 if [ -d "${tagPath}/${workName}/${projectName}" ];then ## 项目名存在，退出 echo "项目名存在" exit 1 fi echo "下载模板中..." ## 3、下载模板 ,如果很多用户同时下载到同一目录 git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${tagPath}/${workName}/${projectName}/deploy" ## 复制 node_modules echo "环境配置中..." cp -rf ${tmpPath}/node_modules ${tagPath}/${workName}/${projectName}/deploy/node_modules cd ${tagPath}/${workName}/${projectName}/deploy/ ## 重命名 mv project ${projectName} rm -r -f oldPackage build/oldWebpack ## 替换 .env.development 的 name 值 sed -i 's#\(VITE_APP_PN \?= \?\).#\1"'"${projectName}/${workName}"'";#g' .env.development ## 替换 package.json 的 name 值 sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json ## 替换 processes.json 的 args 值 sed -i '4s#\("name": \?"\).#\1'"vite-${workName}-${projectName}"'",#g' processes.json sed -i '7s#\("args": \?"\).#\1'"--host --port ${port}"'",#g' processes.json cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiLogin sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiMain sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/setting/desktop/appsetting/js/1.0.0 sed -i 's#\(projectName \?= \?\).#\1"'"${projectName}"'";#g' appsetting.js ## 返回预览目录 cd ${tagPath}/${workName}/${projectName}/deploy ### 启动用yarn 可以把 --host --port 带入 script dev ## yarn run dev --host --port $port echo "正在启动服务..." npm run pm2:start #!/bin/bash ## 权限问题，用 chmod u+x .sh ## eg: ## cd /mobileproject/$1/XcxProject hivui create $1 if [ $# != 3 ] ; then echo "创建项目的参数不正确，请输入（用户ID，项目名，预览端口）" exit 1 fi # basePath='/opt/eap5/desktop' basePath='/eap5.0/desktop' tagPath=$basePath'/preview' # tmpPath=$basePath'/project-template' tmpPath='/eap5.0/hiruntime/project/desktop/project-template' workName=$1 projectName=$2 port=$3 source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t<!--预览时公共库-->' source[1]='\n\t<script src="\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[2]='\n\t<%}%>' source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t<!--发布时公共库-->' source[4]='\n\t<script src="\/freemark\/render\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[5]='\n\t<%}%>\n' # echo 's/<\/head>/'${source[]}'<\/head>/g' # exit 1; ## 参数工号$1 项目名$2 端口$3 ## 工号=工作空间 ## 1、判断工作空间没有就创建 if [ ! -d "${tagPath}/${workName}" ];then mkdir "${tagPath}/${workName}" fi ## 2、判断项目名 if [ -d "${tagPath}/${workName}/${projectName}" ];then ## 项目名存在，退出 echo "项目名存在" exit 1 fi echo "下载模板中..." ## 3、下载模板 ,如果很多用户同时下载到同一目录 git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${tagPath}/${workName}/${projectName}/deploy" ## 复制 node_modules echo "环境配置中..." cp -rf ${tmpPath}/node_modules ${tagPath}/${workName}/${projectName}/deploy/node_modules cd ${tagPath}/${workName}/${projectName}/deploy/ ## 重命名 mv project ${projectName} rm -r -f oldPackage build/oldWebpack ## 替换 .env.development 的 name 值 sed -i 's#\(VITE_APP_PN \?= \?\).#\1"'"${projectName}/${workName}"'";#g' .env.development ## 替换 package.json 的 name 值 sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json ## 替换 processes.json 的 args 值 sed -i '4s#\("name": \?"\).#\1'"vite-${workName}-${projectName}"'",#g' processes.json sed -i '7s#\("args": \?"\).#\1'"--host --port ${port}"'",#g' processes.json cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiLogin sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiMain sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/setting/desktop/appsetting/js/1.0.0 sed -i 's#\(projectName \?= \?\).#\1"'"${projectName}"'";#g' appsetting.js ## 返回预览目录 cd ${tagPath}/${workName}/${projectName}/deploy ### 启动用yarn 可以把 --host --port 带入 script dev ## yarn run dev --host --port $port echo "正在启动服务..." npm run pm2:start

Ignore Space Show notes View

build/bin/create.sh

#!/bin/bash
## 权限问题，用  chmod u+x *.sh
## eg:
## cd /mobileproject/$1/XcxProject hivui create $1

if [ $# != 3 ] ; then
    echo "创建项目的参数不正确，请输入（用户ID，项目名，预览端口）"
    exit 1
fi

# basePath='/opt/eap5/desktop'
basePath='/eap5.0/desktop'
tagPath=$basePath'/preview'
# tmpPath=$basePath'/project-template'
tmpPath='/eap5.0/hiruntime/project/desktop/project-template'
workName=$1
projectName=$2
port=$3 
source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t'
source[1]='\n\t<script src="\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>'
source[2]='\n\t<%}%>'
source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t'
source[4]='\n\t<script src="\/${serverName}\/render\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>'
source[5]='\n\t<%}%>\n'
# echo 's/<\/head>/'${source[*]}'<\/head>/g'
# exit 1;
## 参数  工号$1  项目名$2  端口$3
## 工号=工作空间
## 1、判断工作空间 没有就创建
if [ ! -d "${tagPath}/${workName}" ];then
    mkdir "${tagPath}/${workName}"
fi
## 2、判断项目名
if [ -d "${tagPath}/${workName}/${projectName}" ];then
    ## 项目名存在，退出
    echo "项目名存在"
    exit 1
fi

echo "下载模板中..."
## 3、下载模板 ,如果很多用户同时下载到同一目录
git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${tagPath}/${workName}/${projectName}/deploy"
 
## 复制 node_modules
echo "环境配置中..."
cp -rf ${tmpPath}/node_modules ${tagPath}/${workName}/${projectName}/deploy/node_modules
cd ${tagPath}/${workName}/${projectName}/deploy/
## 重命名
mv project ${projectName}
rm -r -f oldPackage build/oldWebpack
## 替换 .env.development 的 name 值
sed -i 's#$VITE_APP_PN \?= \?$.*#\1"'"${projectName}/${workName}"'";#g' .env.development
## 替换 package.json 的 name 值
sed -i 's#$"name": \?"$.*#\1'"${projectName}"'",#g' package.json
## 替换 processes.json 的 args 值
sed -i '4s#$"name": \?"$.*#\1'"vite-${workName}-${projectName}"'",#g' processes.json
sed -i '7s#$"args": \?"$.*#\1'"--host --port ${port}"'",#g' processes.json

cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiLogin

sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html

cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiMain

sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html

cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/setting/desktop/appsetting/js/1.0.0
sed -i 's#$projectName \?= \?$.*#\1"'"${projectName}"'";#g' appsetting.js

## 返回预览目录
cd ${tagPath}/${workName}/${projectName}/deploy
### 启动 用yarn 可以把 --host --port 带入 script  dev
## yarn run dev --host --port $port
echo "正在启动服务..."
npm run pm2:start

#!/bin/bash
## 权限问题，用  chmod u+x *.sh
## eg:
## cd /mobileproject/$1/XcxProject hivui create $1

if [ $# != 3 ] ; then
    echo "创建项目的参数不正确，请输入（用户ID，项目名，预览端口）"
    exit 1
fi

# basePath='/opt/eap5/desktop'
basePath='/eap5.0/desktop'
tagPath=$basePath'/preview'
# tmpPath=$basePath'/project-template'
tmpPath='/eap5.0/hiruntime/project/desktop/project-template'
workName=$1
projectName=$2
port=$3 
source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t'
source[1]='\n\t<script src="\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>'
source[2]='\n\t<%}%>'
source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t'
source[4]='\n\t<script src="\/freemark\/render\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>'
source[5]='\n\t<%}%>\n'
# echo 's/<\/head>/'${source[*]}'<\/head>/g'
# exit 1;
## 参数  工号$1  项目名$2  端口$3
## 工号=工作空间
## 1、判断工作空间 没有就创建
if [ ! -d "${tagPath}/${workName}" ];then
    mkdir "${tagPath}/${workName}"
fi
## 2、判断项目名
if [ -d "${tagPath}/${workName}/${projectName}" ];then
    ## 项目名存在，退出
    echo "项目名存在"
    exit 1
fi

cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiLogin

sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html

cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiMain

sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html

cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/setting/desktop/appsetting/js/1.0.0
sed -i 's#$projectName \?= \?$.*#\1"'"${projectName}"'";#g' appsetting.js

Ignore Space Show notes View build/bin/oper.sh
#!/bin/bash ## 权限问题，用 chmod u+x .sh ## eg: ## cd /mobileproject/$1/XcxProject hivui create $1 if [ $# -gt 4 ] ; then echo "$3 操作命令有误，请重新输入！" exit 1 fi # basePath='/opt/eap5/desktop' basePath='/eap5.0/desktop' tagPath=$basePath'/preview' # tmpPath=$basePath'/project-template' tmpPath='/eap5.0/hiruntime/project/desktop/project-template' gitTmp='/eap5.0/hiruntime/project/desktop/__gittmp' workName=$1 projectName=$2 oper=$3 uploadPath=$4 syncWay=$4 source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t<!--预览时公共库-->' source[1]='\n\t<script src="\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[2]='\n\t<%}%>' source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t<!--发布时公共库-->' source[4]='\n\t<script src="\/${serverName}\/render\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[5]='\n\t<%}%>\n' ## aaa=$(pm2 id "vite-${workName}-${projectName}") ## [] 说明服务有启动但是，没有执行 ## if [ ${#aaa} = 2 ] ; then ## echo "===================" ## fi ## 参数工号$1 项目名$2 端口$3 ## 工号=工作空间 ## 1、判断工作空间没有就创建 # if [ ! -d "${tagPath}/${workName}" ];then # echo "${oper} 命令：工作空间不存在！" # exit 1 # fi ## 2、判断项目名 if [ ! -d "${tagPath}/${workName}/${projectName}" ];then echo "${oper} 命令：项目名不存在！" # exit 1 fi ## 返回预览目录 # cd ${tagPath}/${workName}/${projectName}/deploy if [ $3 = "restart" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 restart "vite-${workName}-${projectName}" #yarn run pm2:restart vite-${workName}-${projectName} fi if [ $3 = "start" ] ; then pm2 delete "vite-${workName}-${projectName}" ### 用pm2管理，用pm2 重启指定的 cd ${tagPath}/${workName}/${projectName}/deploy yarn run pm2:start fi if [ $oper = "kill" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 delete "vite-${workName}-${projectName}" #yarn run pm2:kill vite-${workName}-${projectName} fi if [ $oper = "stop" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 stop "vite-${workName}-${projectName}" #yarn run pm2:stop vite-${workName}-${projectName} fi if [ $oper = "del" ] ; then if [ $workName = "admin" -a $projectName = "systpl" ] ; then echo "系统模板，不可删除！" exit 1 fi curPid=`pm2 pid vite-${workName}-${projectName}` if [ ! -z "$curPid" ];then echo "vite-${workName}-${projectName} 服务正在关闭！" pm2 delete "vite-${workName}-${projectName}" fi ### 删除用户项目 cd "${tagPath}/${workName}" rm -r -f "${projectName}" echo "vite-${workName}-${projectName} 删除成功！" fi if [ $oper = "build" ] ; then ### 用pm2管理，用pm2 重启指定的 cd "${tagPath}/${workName}/${projectName}/deploy" npm run build #yarn run pm2:stop vite-${workName}-${projectName} cd "${tagPath}/${workName}/${projectName}/deploy/" zip -q -r "${workName}_${projectName}_dist.zip" ./dist if [[ ! -d "$uploadPath" ]]; then echo "${oper} 命令：上传文件夹不存在, 正在帮您创建目录..." mkdir -p "${uploadPath}" fi cp -f "${workName}_${projectName}_dist.zip" "${uploadPath}" # echo "(‐^▽^‐) 恭喜您 ${oper} 命令，很顺利的执行完毕！" fi if [ $oper = "sync" ] ; then git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${gitTmp}" echo ${gitTmp} echo ${tmpPath} rsync -auz "${gitTmp}/" ${tmpPath} rm -rf ${gitTmp} if [ $syncWay = "build" ] ; then echo "正在同步build..." rsync -auz ${tmpPath}/build ${tagPath}/${workName}/${projectName}/deploy/ echo "build已同步！" exit fi if [ $syncWay = "assets" ] ; then echo "正在同步assets_platform资源..." rsync -auz ${tmpPath}/assets_platform ${tagPath}/${workName}/${projectName}/deploy/ echo "assets_platform资源已同步！" exit fi if [ $syncWay = "login" ] ; then echo "正在同步login模块..." rsync -auz ${tmpPath}/project/hivuiLogin ${tagPath}/${workName}/${projectName}/deploy/${projectName}/ cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiLogin sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "login已同步！" exit fi if [ $syncWay = "main" ] ; then echo "正在同步main模块..." rsync -auz ${tmpPath}/project/hivuiMain ${tagPath}/${workName}/${projectName}/deploy/${projectName}/ cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiMain sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "main已同步！" exit fi if [ $syncWay = "hiui" ] ; then echo "正在同步hi-ui库..." cd "${tmpPath}/" npm i hi-ui -S rm -rf ${tagPath}/${workName}/${projectName}/deploy/node_modules/hi-ui rsync -auz ${tmpPath}/node_modules/hi-ui ${tagPath}/${workName}/${projectName}/deploy/node_modules/ echo "hiui已同步！" fi if [ $syncWay = "task" ] ; then echo "正在同步hi-taskcenter库..." cd "${tmpPath}/" npm i hi-ui -S rm -rf ${tagPath}/${workName}/${projectName}/deploy/node_modules/hi-taskcenter rsync -auz ${tmpPath}/node_modules/hi-taskcenter ${tagPath}/${workName}/${projectName}/deploy/node_modules/ echo "hi-taskcenter已同步！" fi if [ $syncWay = "mod" ] ; then echo "正在同步node_modules环境..." cd "${tmpPath}/" npm i rsync -auz ${tmpPath}/node_modules ${tagPath}/${workName}/${projectName}/deploy/ echo "node_modules已同步！" fi rsync -auz ${tmpPath}/package.json ${tagPath}/${workName}/${projectName}/deploy/package.json cd ${tagPath}/${workName}/${projectName}/deploy/ ## 替换 package.json 的 name 值 sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json pm2 delete "vite-${workName}-${projectName}" npm run rm:vite npm run pm2:start pm2 save fi #!/bin/bash ## 权限问题，用 chmod u+x .sh ## eg: ## cd /mobileproject/$1/XcxProject hivui create $1 if [ $# -gt 4 ] ; then echo "$3 操作命令有误，请重新输入！" exit 1 fi # basePath='/opt/eap5/desktop' basePath='/eap5.0/desktop' tagPath=$basePath'/preview' # tmpPath=$basePath'/project-template' tmpPath='/eap5.0/hiruntime/project/desktop/project-template' gitTmp='/eap5.0/hiruntime/project/desktop/__gittmp' workName=$1 projectName=$2 oper=$3 uploadPath=$4 syncWay=$4 source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t<!--预览时公共库-->' source[1]='\n\t<script src="\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[2]='\n\t<%}%>' source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t<!--发布时公共库-->' source[4]='\n\t<script src="\/freemark\/render\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[5]='\n\t<%}%>\n' ## aaa=$(pm2 id "vite-${workName}-${projectName}") ## [] 说明服务有启动但是，没有执行 ## if [ ${#aaa} = 2 ] ; then ## echo "===================" ## fi ## 参数工号$1 项目名$2 端口$3 ## 工号=工作空间 ## 1、判断工作空间没有就创建 # if [ ! -d "${tagPath}/${workName}" ];then # echo "${oper} 命令：工作空间不存在！" # exit 1 # fi ## 2、判断项目名 if [ ! -d "${tagPath}/${workName}/${projectName}" ];then echo "${oper} 命令：项目名不存在！" # exit 1 fi ## 返回预览目录 # cd ${tagPath}/${workName}/${projectName}/deploy if [ $3 = "restart" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 restart "vite-${workName}-${projectName}" #yarn run pm2:restart vite-${workName}-${projectName} fi if [ $3 = "start" ] ; then pm2 delete "vite-${workName}-${projectName}" ### 用pm2管理，用pm2 重启指定的 cd ${tagPath}/${workName}/${projectName}/deploy yarn run pm2:start fi if [ $oper = "kill" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 delete "vite-${workName}-${projectName}" #yarn run pm2:kill vite-${workName}-${projectName} fi if [ $oper = "stop" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 stop "vite-${workName}-${projectName}" #yarn run pm2:stop vite-${workName}-${projectName} fi if [ $oper = "del" ] ; then if [ $workName = "admin" -a $projectName = "systpl" ] ; then echo "系统模板，不可删除！" exit 1 fi curPid=`pm2 pid vite-${workName}-${projectName}` if [ ! -z "$curPid" ];then echo "vite-${workName}-${projectName} 服务正在关闭！" pm2 delete "vite-${workName}-${projectName}" fi ### 删除用户项目 cd "${tagPath}/${workName}" rm -r -f "${projectName}" echo "vite-${workName}-${projectName} 删除成功！" fi if [ $oper = "build" ] ; then ### 用pm2管理，用pm2 重启指定的 cd "${tagPath}/${workName}/${projectName}/deploy" npm run build #yarn run pm2:stop vite-${workName}-${projectName} cd "${tagPath}/${workName}/${projectName}/deploy/" zip -q -r "${workName}_${projectName}_dist.zip" ./dist if [[ ! -d "$uploadPath" ]]; then echo "${oper} 命令：上传文件夹不存在, 正在帮您创建目录..." mkdir -p "${uploadPath}" fi cp -f "${workName}_${projectName}_dist.zip" "${uploadPath}" # echo "(‐^▽^‐) 恭喜您 ${oper} 命令，很顺利的执行完毕！" fi if [ $oper = "sync" ] ; then git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${gitTmp}" echo ${gitTmp} echo ${tmpPath} rsync -auz "${gitTmp}/" ${tmpPath} rm -rf ${gitTmp} if [ $syncWay = "build" ] ; then echo "正在同步build..." rsync -auz ${tmpPath}/build ${tagPath}/${workName}/${projectName}/deploy/ echo "build已同步！" exit fi if [ $syncWay = "assets" ] ; then echo "正在同步assets_platform资源..." rsync -auz ${tmpPath}/assets_platform ${tagPath}/${workName}/${projectName}/deploy/ echo "assets_platform资源已同步！" exit fi if [ $syncWay = "login" ] ; then echo "正在同步login模块..." rsync -auz ${tmpPath}/project/hivuiLogin ${tagPath}/${workName}/${projectName}/deploy/${projectName}/ cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiLogin sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "login已同步！" exit fi if [ $syncWay = "main" ] ; then echo "正在同步main模块..." rsync -auz ${tmpPath}/project/hivuiMain ${tagPath}/${workName}/${projectName}/deploy/${projectName}/ cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiMain sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "main已同步！" exit fi if [ $syncWay = "hiui" ] ; then echo "正在同步hi-ui库..." cd "${tmpPath}/" npm i hi-ui -S rm -rf ${tagPath}/${workName}/${projectName}/deploy/node_modules/hi-ui rsync -auz ${tmpPath}/node_modules/hi-ui ${tagPath}/${workName}/${projectName}/deploy/node_modules/ echo "hiui已同步！" fi if [ $syncWay = "task" ] ; then echo "正在同步hi-taskcenter库..." cd "${tmpPath}/" npm i hi-ui -S rm -rf ${tagPath}/${workName}/${projectName}/deploy/node_modules/hi-taskcenter rsync -auz ${tmpPath}/node_modules/hi-taskcenter ${tagPath}/${workName}/${projectName}/deploy/node_modules/ echo "hi-taskcenter已同步！" fi if [ $syncWay = "mod" ] ; then echo "正在同步node_modules环境..." cd "${tmpPath}/" npm i rsync -auz ${tmpPath}/node_modules ${tagPath}/${workName}/${projectName}/deploy/ echo "node_modules已同步！" fi rsync -auz ${tmpPath}/package.json ${tagPath}/${workName}/${projectName}/deploy/package.json cd ${tagPath}/${workName}/${projectName}/deploy/ ## 替换 package.json 的 name 值 sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json pm2 delete "vite-${workName}-${projectName}" npm run rm:vite npm run pm2:start pm2 save fi

Ignore Space Show notes View

build/bin/oper.sh

#!/bin/bash
## 权限问题，用  chmod u+x *.sh
## eg:
## cd /mobileproject/$1/XcxProject hivui create $1
if [ $# -gt 4 ] ; then
    echo "$3 操作命令有误，请重新输入！"
    exit 1
fi

# basePath='/opt/eap5/desktop'
basePath='/eap5.0/desktop'
tagPath=$basePath'/preview'
# tmpPath=$basePath'/project-template'
tmpPath='/eap5.0/hiruntime/project/desktop/project-template'
gitTmp='/eap5.0/hiruntime/project/desktop/__gittmp'
workName=$1
projectName=$2
oper=$3
uploadPath=$4
syncWay=$4
  
source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t'
source[1]='\n\t<script src="\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>'
source[2]='\n\t<%}%>'
source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t'
source[4]='\n\t<script src="\/${serverName}\/render\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>'
source[5]='\n\t<%}%>\n'
## aaa=$(pm2 id "vite-${workName}-${projectName}")
## [] 说明服务有启动但是，没有执行
## if [ ${#aaa} = 2 ] ; then
##	echo "==================="
## fi

## 参数  工号$1  项目名$2  端口$3
## 工号=工作空间
## 1、判断工作空间 没有就创建
# if [ ! -d "${tagPath}/${workName}" ];then
#     echo "${oper} 命令： 工作空间不存在！"
#     exit 1
# fi

## 2、判断项目名
if [ ! -d "${tagPath}/${workName}/${projectName}" ];then
    echo "${oper} 命令： 项目名不存在！"
    # exit 1
fi

## 返回预览目录
# cd ${tagPath}/${workName}/${projectName}/deploy

if [ $3 = "restart" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 restart "vite-${workName}-${projectName}" 
    #yarn run pm2:restart vite-${workName}-${projectName}
fi

if [ $3 = "start" ] ; then    
    pm2 delete "vite-${workName}-${projectName}"
    ### 用pm2管理，用pm2 重启指定的
    cd ${tagPath}/${workName}/${projectName}/deploy
    yarn run pm2:start
fi

if [ $oper = "kill" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 delete "vite-${workName}-${projectName}" 
    #yarn run pm2:kill vite-${workName}-${projectName}
fi

if [ $oper = "stop" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 stop "vite-${workName}-${projectName}" 
    #yarn run pm2:stop vite-${workName}-${projectName}
fi

if [ $oper = "del" ] ; then

if [ $workName = "admin" -a $projectName = "systpl" ] ; then
        echo "系统模板，不可删除！"
        exit 1
    fi

curPid=`pm2 pid vite-${workName}-${projectName}`
    if [ ! -z "$curPid" ];then
        echo "vite-${workName}-${projectName} 服务正在关闭！"
        pm2 delete "vite-${workName}-${projectName}" 
    fi

### 删除用户项目
    cd "${tagPath}/${workName}"
    rm -r -f "${projectName}"
    echo "vite-${workName}-${projectName} 删除成功！"

if [ $oper = "build" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    cd "${tagPath}/${workName}/${projectName}/deploy"
    npm run build
    #yarn run pm2:stop vite-${workName}-${projectName}
    cd "${tagPath}/${workName}/${projectName}/deploy/"
    zip -q -r "${workName}_${projectName}_dist.zip"  ./dist

if [[ ! -d "$uploadPath" ]]; then
        echo "${oper} 命令： 上传文件夹不存在, 正在帮您创建目录..."
        mkdir -p "${uploadPath}"
    fi

cp -f "${workName}_${projectName}_dist.zip"  "${uploadPath}"
    # echo "(‐^▽^‐) 恭喜您 ${oper} 命令，很顺利的执行完毕！"
fi

if [ $oper = "sync" ] ; then
    git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${gitTmp}"
    echo ${gitTmp} 
    echo ${tmpPath}
    rsync -auz "${gitTmp}/" ${tmpPath}
    rm -rf ${gitTmp}

if [ $syncWay = "build" ] ; then
        echo "正在同步build..."
        rsync -auz ${tmpPath}/build ${tagPath}/${workName}/${projectName}/deploy/
        echo "build已同步！"
        exit 
    fi
    
    if [ $syncWay = "assets" ] ; then
        echo "正在同步assets_platform资源..."
        rsync -auz ${tmpPath}/assets_platform ${tagPath}/${workName}/${projectName}/deploy/
        echo "assets_platform资源已同步！"
        exit 
    fi

if [ $syncWay = "login" ] ; then
        echo "正在同步login模块..."
        rsync -auz ${tmpPath}/project/hivuiLogin ${tagPath}/${workName}/${projectName}/deploy/${projectName}/
        cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiLogin
        sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html
        echo "login已同步！"
        exit 
    fi
    
    if [ $syncWay = "main" ] ; then
        echo "正在同步main模块..."
        rsync -auz ${tmpPath}/project/hivuiMain ${tagPath}/${workName}/${projectName}/deploy/${projectName}/
        cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiMain
        sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html
        echo "main已同步！"
        exit 
    fi

if [ $syncWay = "hiui" ] ; then
        echo "正在同步hi-ui库..."
        cd "${tmpPath}/"
        npm i hi-ui -S
        rm -rf ${tagPath}/${workName}/${projectName}/deploy/node_modules/hi-ui
        rsync -auz ${tmpPath}/node_modules/hi-ui ${tagPath}/${workName}/${projectName}/deploy/node_modules/
        echo "hiui已同步！"
    fi
    
    if [ $syncWay = "task" ] ; then
        echo "正在同步hi-taskcenter库..."
        cd "${tmpPath}/"
        npm i hi-ui -S
        rm -rf ${tagPath}/${workName}/${projectName}/deploy/node_modules/hi-taskcenter
        rsync -auz ${tmpPath}/node_modules/hi-taskcenter ${tagPath}/${workName}/${projectName}/deploy/node_modules/
        echo "hi-taskcenter已同步！"
    fi
    
    if [ $syncWay = "mod" ] ; then
        echo "正在同步node_modules环境..."
        cd "${tmpPath}/"        
        npm i 
        rsync -auz ${tmpPath}/node_modules ${tagPath}/${workName}/${projectName}/deploy/
        echo "node_modules已同步！"
    fi
    
    rsync -auz ${tmpPath}/package.json ${tagPath}/${workName}/${projectName}/deploy/package.json
    cd ${tagPath}/${workName}/${projectName}/deploy/
    ## 替换 package.json 的 name 值
    sed -i 's#$"name": \?"$.*#\1'"${projectName}"'",#g' package.json
    pm2 delete "vite-${workName}-${projectName}"
    npm run rm:vite
    npm run pm2:start
    pm2 save

#!/bin/bash
## 权限问题，用  chmod u+x *.sh
## eg:
## cd /mobileproject/$1/XcxProject hivui create $1
if [ $# -gt 4 ] ; then
    echo "$3 操作命令有误，请重新输入！"
    exit 1
fi

# basePath='/opt/eap5/desktop'
basePath='/eap5.0/desktop'
tagPath=$basePath'/preview'
# tmpPath=$basePath'/project-template'
tmpPath='/eap5.0/hiruntime/project/desktop/project-template'
gitTmp='/eap5.0/hiruntime/project/desktop/__gittmp'
workName=$1
projectName=$2
oper=$3
uploadPath=$4
syncWay=$4
  
source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t'
source[1]='\n\t<script src="\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>'
source[2]='\n\t<%}%>'
source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t'
source[4]='\n\t<script src="\/freemark\/render\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>'
source[5]='\n\t<%}%>\n'
## aaa=$(pm2 id "vite-${workName}-${projectName}")
## [] 说明服务有启动但是，没有执行
## if [ ${#aaa} = 2 ] ; then
##	echo "==================="
## fi

## 2、判断项目名
if [ ! -d "${tagPath}/${workName}/${projectName}" ];then
    echo "${oper} 命令： 项目名不存在！"
    # exit 1
fi

## 返回预览目录
# cd ${tagPath}/${workName}/${projectName}/deploy

if [ $3 = "restart" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 restart "vite-${workName}-${projectName}" 
    #yarn run pm2:restart vite-${workName}-${projectName}
fi

if [ $oper = "kill" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 delete "vite-${workName}-${projectName}" 
    #yarn run pm2:kill vite-${workName}-${projectName}
fi

if [ $oper = "stop" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 stop "vite-${workName}-${projectName}" 
    #yarn run pm2:stop vite-${workName}-${projectName}
fi

if [ $oper = "del" ] ; then

if [ $workName = "admin" -a $projectName = "systpl" ] ; then
        echo "系统模板，不可删除！"
        exit 1
    fi

### 删除用户项目
    cd "${tagPath}/${workName}"
    rm -r -f "${projectName}"
    echo "vite-${workName}-${projectName} 删除成功！"

if [[ ! -d "$uploadPath" ]]; then
        echo "${oper} 命令： 上传文件夹不存在, 正在帮您创建目录..."
        mkdir -p "${uploadPath}"
    fi

cp -f "${workName}_${projectName}_dist.zip"  "${uploadPath}"
    # echo "(‐^▽^‐) 恭喜您 ${oper} 命令，很顺利的执行完毕！"
fi

Ignore Space Show notes View build/webpack.base.conf.js
//考虑用，parallel-webpack 并发打包加快打包速度 const path = require('path') const webpack = require('webpack') const VueLoaderPlugin = require('vue-loader/lib/plugin') const TerserPlugin = require("terser-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin');//本插件基于 webpack v4 的新特性（模块类型）构建，并且需要 webpack 4 才能正常工作。 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin') //运行打包命令的时候就可以看到每个loader 和插件执行耗时 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const utils = require('./utils') const packageConfig = require('../package.json') const vueLoaderConfig = require('./vue-loader.conf') // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //读取.evn 对应的文件，写入环境变量 var dotenv = require('dotenv').config({ path: resolve('.env.' + process.env.NODE_ENV) }); var cfg = { ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k))) } let evnConfig = {} for (let key in cfg) { evnConfig[key] = '"' + cfg[key] + '"' } //路径转换 function resolve(dir) { // console.log(dir,'---------------------------',path.join(__dirname, '..', dir)) return path.join(__dirname, '..', dir) } //语法验证 const createLintingRule = () => ({ test: /\.(js\|vue\|dtvevt)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: true } }) const useEslint = true; //project 这个目录是暂时命名，当用hivui create 创建时候会根据用户输入确定 const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; const smp = new SpeedMeasurePlugin();//smp.wrap smp.wrap( module.exports = { //指定目录，默认的值就是项目的根目录 // context: resolve(projectName), //编译入口 String\|\|Array // entry: '', //没有指定入口文件时，按目录搜索对应的package.json所在的入口 entry() { // 初始化入口配置 const entry = {} // 所有模块的列表 const moduleToBuild = require('./module-conf').getModuleToBuild() \|\| [] // 根据传入的待打包目录名称，构建多入口配置 for (let module of moduleToBuild) { // entry[module] = `${module}/index.js` let name = module.replace(/\//gi, '_'); entry[name] = `${module}/index.js` } return entry }, //输出路径 output: { path: resolve('dist'), filename: 'static/js/[name].js', //指定打包后的资源目录相对于dist 下模块index.html publicPath: './' }, //如何寻找模块所对应的文件 resolve: { // 配置省略文件路径后缀名，引入文件的时候可以不用写文件的后缀名 extensions: ['.css', '.less', '.js', '.jsx', '.vue', '.json'], //指定引用别名 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve(projectName), '@main': resolve(projectName + '/hivuiMain'), } }, //排除不打包 externals: { // 'axios':'axios', 'vue': 'Vue', "element-ui": "ELEMENT", // 'vue-router': 'VueRouter', // 'vuex':'Vuex', }, //解析模块的规则 module: { rules: [ // ...(useEslint ? [createLintingRule()] : []), ...(utils.styleLoaders({ sourceMap: false, extract: true, usePostCSS: true })), { test: /\.(vue)$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.(js\|jsx)$/, loader: 'babel-loader', exclude: /node_modules/, options: { cacheDirectory: true } // exclude: [ // /node_modules\/(webpack\|html-webpack-plugin)\//, // ], }, // element amdin src/icons使用 // { // test: /\.svg$/, // loader: 'svg-sprite-loader', // include: [resolve('src/icons')], // options: { // symbolId: 'icon-[name]' // } // }, { test: /\.(png\|jpe?g\|gif\|svg)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/img/[name].[ext]'//.[hash:7] // publicPath:"../img/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/img/" //生成之后存放的路径 } }, { test: /\.(mp4\|webm\|ogg\|mp3\|wav\|flac\|aac)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/media/[name].[ext]'//.[hash:7] // publicPath:"../media/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/media/" //生成之后存放的路径 } }, { test: /\.(woff2?\|eot\|ttf\|otf)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: "[name].[ext]",//[hash:8]. publicPath: "../fonts/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/fonts/" //生成之后存放的路径 // name: 'static/fonts/[name].[hash:7].[ext]' } } ] }, devtool: "source-map", optimization: { minimizer: [ new CssMinimizerPlugin(), new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash:10].css'//.[contenthash] }), new TerserPlugin() ], splitChunks: { chunks: 'all', cacheGroups: { // vue: { // name: 'vue', // test: /[\\/]node_modules[\\/]vue[\\/]/, // priority: -10 // }, // vuex: { // name: 'vuex', // test: /[\\/]node_modules[\\/]vuex[\\/]/, // priority: -10 // }, // 'vue-router': { // name: 'vue-router', // test: /[\\/]node_modules[\\/]vue-router[\\/]/, // priority: -10 // }, // 'element-ui': { // name: 'element-ui', // test: /[\\/]node_modules[\\/]element-ui[\\/]/, // priority: -10 // }, 'module-vendors': { name: 'module-vendors', test: /[\\/]node_modules[\\/]/, priority: -20 } }, } }, plugins: [ //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量 new webpack.DefinePlugin({ 'process.env': evnConfig }), new VueLoaderPlugin(), //预设一些基础库 new webpack.DllReferencePlugin({ context: resolve("assets_platform/vendor_dll"), //告诉webpack哪些库不参与打包，同时使用时名称也得变 manifest:resolve('assets_platform/vendor_dll/vuelibs-manifest.json') }), new webpack.DllReferencePlugin({ context: resolve("assets_platform/vendor_dll"), //告诉webpack哪些库不参与打包，同时使用时名称也得变 manifest:resolve('assets_platform/vendor_dll/vendor-manifest.json') }), // new AddAssetHtmlPlugin({ // filepath: resolve('webpackDll/Vue.js'), // outputPath:'./static/js/', // publicPath:'./static/js/' // }), ], }; //考虑用，parallel-webpack 并发打包加快打包速度 const path = require('path') const webpack = require('webpack') const VueLoaderPlugin = require('vue-loader/lib/plugin') const TerserPlugin = require("terser-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin');//本插件基于 webpack v4 的新特性（模块类型）构建，并且需要 webpack 4 才能正常工作。 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin') //运行打包命令的时候就可以看到每个loader 和插件执行耗时 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const utils = require('./utils') const packageConfig = require('../package.json') const vueLoaderConfig = require('./vue-loader.conf') // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //读取.evn 对应的文件，写入环境变量 var dotenv = require('dotenv').config({ path: resolve('.env.' + process.env.NODE_ENV) }); var cfg = { ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k))) } let evnConfig = {} for (let key in cfg) { evnConfig[key] = '"' + cfg[key] + '"' } //路径转换 function resolve(dir) { // console.log(dir,'---------------------------',path.join(__dirname, '..', dir)) return path.join(__dirname, '..', dir) } //语法验证 const createLintingRule = () => ({ test: /\.(js\|vue\|dtvevt)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: true } }) const useEslint = true; //project 这个目录是暂时命名，当用hivui create 创建时候会根据用户输入确定 const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; const smp = new SpeedMeasurePlugin();//smp.wrap smp.wrap( module.exports = { //指定目录，默认的值就是项目的根目录 // context: resolve(projectName), //编译入口 String\|\|Array // entry: '', //没有指定入口文件时，按目录搜索对应的package.json所在的入口 entry() { // 初始化入口配置 const entry = {} // 所有模块的列表 const moduleToBuild = require('./module-conf').getModuleToBuild() \|\| [] // 根据传入的待打包目录名称，构建多入口配置 for (let module of moduleToBuild) { // entry[module] = `${module}/index.js` let name = module.replace(/\//gi, '_'); entry[name] = `${module}/index.js` } return entry }, //输出路径 output: { path: resolve('dist'), filename: 'static/js/[name].js', //指定打包后的资源目录相对于dist 下模块index.html // publicPath: './' publicPath:"/e5" }, //如何寻找模块所对应的文件 resolve: { // 配置省略文件路径后缀名，引入文件的时候可以不用写文件的后缀名 extensions: ['.css', '.less', '.js', '.jsx', '.vue', '.json'], //指定引用别名 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve(projectName), '@main': resolve(projectName + '/hivuiMain'), } }, //排除不打包 externals: { // 'axios':'axios', 'vue': 'Vue', "element-ui": "ELEMENT", // 'vue-router': 'VueRouter', // 'vuex':'Vuex', }, //解析模块的规则 module: { rules: [ // ...(useEslint ? [createLintingRule()] : []), ...(utils.styleLoaders({ sourceMap: false, extract: true, usePostCSS: true })), { test: /\.(vue)$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.(js\|jsx)$/, loader: 'babel-loader', exclude: /node_modules/, options: { cacheDirectory: true } // exclude: [ // /node_modules\/(webpack\|html-webpack-plugin)\//, // ], }, // element amdin src/icons使用 // { // test: /\.svg$/, // loader: 'svg-sprite-loader', // include: [resolve('src/icons')], // options: { // symbolId: 'icon-[name]' // } // }, { test: /\.(png\|jpe?g\|gif\|svg)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/img/[name].[ext]'//.[hash:7] // publicPath:"../img/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/img/" //生成之后存放的路径 } }, { test: /\.(mp4\|webm\|ogg\|mp3\|wav\|flac\|aac)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/media/[name].[ext]'//.[hash:7] // publicPath:"../media/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/media/" //生成之后存放的路径 } }, { test: /\.(woff2?\|eot\|ttf\|otf)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: "[name].[ext]",//[hash:8]. publicPath: "../fonts/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/fonts/" //生成之后存放的路径 // name: 'static/fonts/[name].[hash:7].[ext]' } } ] }, devtool: "source-map", optimization: { minimizer: [ new CssMinimizerPlugin(), new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash:10].css'//.[contenthash] }), new TerserPlugin() ], splitChunks: { chunks: 'all', cacheGroups: { // vue: { // name: 'vue', // test: /[\\/]node_modules[\\/]vue[\\/]/, // priority: -10 // }, // vuex: { // name: 'vuex', // test: /[\\/]node_modules[\\/]vuex[\\/]/, // priority: -10 // }, // 'vue-router': { // name: 'vue-router', // test: /[\\/]node_modules[\\/]vue-router[\\/]/, // priority: -10 // }, // 'element-ui': { // name: 'element-ui', // test: /[\\/]node_modules[\\/]element-ui[\\/]/, // priority: -10 // }, 'module-vendors': { name: 'module-vendors', test: /[\\/]node_modules[\\/]/, priority: -20 } }, } }, plugins: [ //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量 new webpack.DefinePlugin({ 'process.env': evnConfig }), new VueLoaderPlugin(), //预设一些基础库 new webpack.DllReferencePlugin({ context: resolve("assets_platform/vendor_dll"), //告诉webpack哪些库不参与打包，同时使用时名称也得变 manifest:resolve('assets_platform/vendor_dll/vuelibs-manifest.json') }), new webpack.DllReferencePlugin({ context: resolve("assets_platform/vendor_dll"), //告诉webpack哪些库不参与打包，同时使用时名称也得变 manifest:resolve('assets_platform/vendor_dll/vendor-manifest.json') }), // new AddAssetHtmlPlugin({ // filepath: resolve('webpackDll/Vue.js'), // outputPath:'./static/js/', // publicPath:'./static/js/' // }), ], };

Ignore Space Show notes View

build/webpack.base.conf.js

//考虑用，parallel-webpack  并发打包加快打包速度
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//本插件基于 webpack v4 的新特性（模块类型）构建，并且需要 webpack 4 才能正常工作。
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

//运行打包命令的时候就可以看到每个loader 和插件执行耗时
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const utils = require('./utils')
const packageConfig = require('../package.json')
const vueLoaderConfig = require('./vue-loader.conf')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

//读取.evn 对应的文件，写入环境变量
var dotenv = require('dotenv').config({ path: resolve('.env.' + process.env.NODE_ENV) });
var cfg = { ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k))) }
let evnConfig = {}
for (let key in cfg) {
    evnConfig[key] = '"' + cfg[key] + '"'
}

//路径转换
function resolve(dir) {
    // console.log(dir,'---------------------------',path.join(__dirname, '..', dir))
    return path.join(__dirname, '..', dir)
}

//语法验证
const createLintingRule = () => ({
    test: /\.(js|vue|dtvevt)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
        formatter: require('eslint-friendly-formatter'),
        emitWarning: true
    }
})

const useEslint = true;
//project 这个目录是暂时命名，当用hivui create 创建时候 会根据用户输入确定
const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name;

const smp = new SpeedMeasurePlugin();//smp.wrap smp.wrap(
module.exports = {
    //指定目录，默认的值就是项目的根目录
    // context: resolve(projectName),
    //编译入口 String||Array
    // entry: '',
    //没有指定入口文件时，按目录搜索 对应的package.json所在的入口
    entry() {
        // 初始化入口配置
        const entry = {}
        // 所有模块的列表
        const moduleToBuild = require('./module-conf').getModuleToBuild() || []
        // 根据传入的待打包目录名称，构建多入口配置
        for (let module of moduleToBuild) {
            // entry[module] = `${module}/index.js`
            let name = module.replace(/\//gi, '_');
            entry[name] = `${module}/index.js`
        }
        return entry
    },
    //输出路径 
    output: {
        path: resolve('dist'),
        filename: 'static/js/[name].js',
        //指定打包后的资源目录 相对于dist 下 模块index.html
        publicPath: './'
    },
    //如何寻找模块所对应的文件
    resolve: {
        // 配置省略文件路径后缀名，引入文件的时候可以不用写文件的后缀名
        extensions: ['.css', '.less', '.js', '.jsx', '.vue', '.json'],
        //指定引用别名
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve(projectName),
            '@main': resolve(projectName + '/hivuiMain'),
        }
    },
    //排除不打包
    externals: {
        // 'axios':'axios',
        'vue': 'Vue',
        "element-ui": "ELEMENT",
        // 'vue-router': 'VueRouter',
        // 'vuex':'Vuex',      
    },
    //解析模块的规则
    module: {
        rules: [

// ...(useEslint ? [createLintingRule()] : []),
            ...(utils.styleLoaders({
                sourceMap: false,
                extract: true,
                usePostCSS: true
            })),
            {
                test: /\.(vue)$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    cacheDirectory: true
                }
                // exclude: [
                //     /node_modules\/(webpack|html-webpack-plugin)\//,
                // ],
            },
            // element amdin src/icons使用
            // {
            //     test: /\.svg$/,
            //     loader: 'svg-sprite-loader',
            //     include: [resolve('src/icons')],
            //     options: {
            //         symbolId: 'icon-[name]'
            //     }
            // },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'static/img/[name].[ext]'//.[hash:7]
                    // publicPath:"../img/",	//替换CSS引用的图片路径 可以替换成爱拍云上的路径
                    // outputPath:"static/img/"		//生成之后存放的路径
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'static/media/[name].[ext]'//.[hash:7]
                    // publicPath:"../media/",	//替换CSS引用的图片路径 可以替换成爱拍云上的路径
                    // outputPath:"static/media/"		//生成之后存放的路径
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: "[name].[ext]",//[hash:8].
                    publicPath: "../fonts/",	//替换CSS引用的图片路径 可以替换成爱拍云上的路径
                    outputPath: "static/fonts/"		//生成之后存放的路径
                    // name: 'static/fonts/[name].[hash:7].[ext]'
                }
            }
        ]
    },
    devtool: "source-map",
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
            new MiniCssExtractPlugin({
                filename: 'static/css/[name].[contenthash:10].css'//.[contenthash]
            }),
            new TerserPlugin()
        ],
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                // vue: {
                //     name: 'vue',
                //     test: /[\\/]node_modules[\\/]vue[\\/]/,
                //     priority: -10
                // },
                // vuex: {
                //     name: 'vuex',
                //     test: /[\\/]node_modules[\\/]vuex[\\/]/,
                //     priority: -10
                // },
                // 'vue-router': {
                //     name: 'vue-router',
                //     test: /[\\/]node_modules[\\/]vue-router[\\/]/,
                //     priority: -10
                // },
                // 'element-ui': {
                //     name: 'element-ui',
                //     test: /[\\/]node_modules[\\/]element-ui[\\/]/,
                //     priority: -10
                // },
                'module-vendors': {
                    name: 'module-vendors',
                    test: /[\\/]node_modules[\\/]/,
                    priority: -20
                }
            },
        }
    },
    plugins: [
        //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量
        new webpack.DefinePlugin({
            'process.env': evnConfig
        }),
        new VueLoaderPlugin(),
        //预设一些基础库
        new webpack.DllReferencePlugin({
            context: resolve("assets_platform/vendor_dll"),
            //告诉webpack哪些库不参与打包，同时使用时名称也得变
            manifest:resolve('assets_platform/vendor_dll/vuelibs-manifest.json')
        }),
        new webpack.DllReferencePlugin({
            context: resolve("assets_platform/vendor_dll"),
            //告诉webpack哪些库不参与打包，同时使用时名称也得变
            manifest:resolve('assets_platform/vendor_dll/vendor-manifest.json')
        }),
        // new AddAssetHtmlPlugin({
        //     filepath: resolve('webpackDll/Vue.js'),
        //     outputPath:'./static/js/',
        //     publicPath:'./static/js/'
        // }),
    ],
};

//运行打包命令的时候就可以看到每个loader 和插件执行耗时
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

//路径转换
function resolve(dir) {
    // console.log(dir,'---------------------------',path.join(__dirname, '..', dir))
    return path.join(__dirname, '..', dir)
}

const smp = new SpeedMeasurePlugin();//smp.wrap smp.wrap(
module.exports = {
    //指定目录，默认的值就是项目的根目录
    // context: resolve(projectName),
    //编译入口 String||Array
    // entry: '',
    //没有指定入口文件时，按目录搜索 对应的package.json所在的入口
    entry() {
        // 初始化入口配置
        const entry = {}
        // 所有模块的列表
        const moduleToBuild = require('./module-conf').getModuleToBuild() || []
        // 根据传入的待打包目录名称，构建多入口配置
        for (let module of moduleToBuild) {
            // entry[module] = `${module}/index.js`
            let name = module.replace(/\//gi, '_');
            entry[name] = `${module}/index.js`
        }
        return entry
    },
    //输出路径 
    output: {
        path: resolve('dist'),
        filename: 'static/js/[name].js',
        //指定打包后的资源目录 相对于dist 下 模块index.html
        // publicPath: './'
        publicPath:"/e5"
    },
    //如何寻找模块所对应的文件
    resolve: {
        // 配置省略文件路径后缀名，引入文件的时候可以不用写文件的后缀名
        extensions: ['.css', '.less', '.js', '.jsx', '.vue', '.json'],
        //指定引用别名
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve(projectName),
            '@main': resolve(projectName + '/hivuiMain'),
        }
    },
    //排除不打包
    externals: {
        // 'axios':'axios',
        'vue': 'Vue',
        "element-ui": "ELEMENT",
        // 'vue-router': 'VueRouter',
        // 'vuex':'Vuex',      
    },
    //解析模块的规则
    module: {
        rules: [

Ignore Space Show notes View build/webpack.config.js
'use strict' process.env.NODE_ENV = 'production' require('./check-versions')() const fs = require("fs") const chalk = require('chalk') const { merge } = require('webpack-merge'); // 用来记录当前打包的模块路径列表，判断进程参数 let moduleList = (process.argv[2] \|\| "").replace(/\s$/g, "") if (moduleList == "") { moduleList = require('./module-conf').moduleList \|\| [] } else { moduleList = moduleList.split(',') } // 如果有传参时，对传入的参数进行检测，如果参数非法，那么停止打包操作 const checkModule = require('./module-conf').checkModule for (let i = moduleList.length - 1; i >= 0; i--) { if (!checkModule(moduleList[i])) { return } } const path = require('path') // const ora = require('ora') const rm = require('rimraf') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig = require('./webpack.base.conf') let webpackList = [], rmList = []; //删除文件 function getRm(pathStr) { return new Promise((resolve, reject) => { rm(pathStr, err => { if (err) { reject(pathStr + 'del failed!!'); throw err; } resolve(); }); }).then(res => { //console.log(res) }); } //构建webpack 配置 for (let i = moduleList.length - 1; i >= 0; i--) { let MODULE = moduleList[i]; //构建时要删除的模块目录 rmList.push(getRm(path.resolve(__dirname, '../dist', MODULE))); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; entry[MODULE_NAME] = `${MODULE}/index.js`; // console.log(`/e5/${MODULE.replace('./','')}`); let wpk = merge({}, webpackConfig, { entry: entry, output: { path: path.resolve(__dirname, '../dist', MODULE), // filename: 'static/js/[name].[contenthash:10].js' publicPath:`/e5/render/${MODULE.replace('./','')}` } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在返回 true ，如果目录不存在返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, '../index.html') } wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, // 这里要指定把哪些chunks追加到html中，默认会把所有入口的chunks追加到html中，这样是不行的 // chunks: ['vendor', 'manifest', 'elementUI','app','hiui', MODULE_NAME], minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, compile: true })) webpackList.push(wpk); } module.exports = webpackList; 'use strict' process.env.NODE_ENV = 'production' require('./check-versions')() const fs = require("fs") const chalk = require('chalk') const { merge } = require('webpack-merge'); // 用来记录当前打包的模块路径列表，判断进程参数 let moduleList = (process.argv[2] \|\| "").replace(/\s$/g, "") if (moduleList == "") { moduleList = require('./module-conf').moduleList \|\| [] } else { moduleList = moduleList.split(',') } // 如果有传参时，对传入的参数进行检测，如果参数非法，那么停止打包操作 const checkModule = require('./module-conf').checkModule for (let i = moduleList.length - 1; i >= 0; i--) { if (!checkModule(moduleList[i])) { return } } const path = require('path') // const ora = require('ora') const rm = require('rimraf') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig = require('./webpack.base.conf') let webpackList = [], rmList = []; //删除文件 function getRm(pathStr) { return new Promise((resolve, reject) => { rm(pathStr, err => { if (err) { reject(pathStr + 'del failed!!'); throw err; } resolve(); }); }).then(res => { //console.log(res) }); } //构建webpack 配置 for (let i = moduleList.length - 1; i >= 0; i--) { let MODULE = moduleList[i]; //构建时要删除的模块目录 rmList.push(getRm(path.resolve(__dirname, '../dist', MODULE))); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; entry[MODULE_NAME] = `${moduleList[i]}/index.js`; let wpk = merge({}, webpackConfig, { entry: entry, output: { path: path.resolve(__dirname, '../dist', MODULE), // filename: 'static/js/[name].[contenthash:10].js' } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在返回 true ，如果目录不存在返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, '../index.html') } wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, // 这里要指定把哪些chunks追加到html中，默认会把所有入口的chunks追加到html中，这样是不行的 // chunks: ['vendor', 'manifest', 'elementUI','app','hiui', MODULE_NAME], minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, compile: true })) webpackList.push(wpk); } module.exports = webpackList;

Ignore Space Show notes View

build/webpack.config.js

'use strict'
process.env.NODE_ENV = 'production'

require('./check-versions')()
const fs = require("fs")
const chalk = require('chalk')
const { merge } = require('webpack-merge');

// 用来记录当前打包的模块路径列表，判断进程参数
let moduleList = (process.argv[2] || "").replace(/\s*$/g, "")
if (moduleList == "") {
  moduleList = require('./module-conf').moduleList || []
} else {
  moduleList = moduleList.split(',')
}

// 如果有传参时，对传入的参数进行检测，如果参数非法，那么停止打包操作
const checkModule = require('./module-conf').checkModule
for (let i = moduleList.length - 1; i >= 0; i--) {
  if (!checkModule(moduleList[i])) {
    return
  }
}

const path = require('path')
// const ora = require('ora')
const rm = require('rimraf')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackConfig = require('./webpack.base.conf')
let webpackList = [], rmList = [];

//删除文件
function getRm(pathStr) {
  return new Promise((resolve, reject) => {
    rm(pathStr, err => {
      if (err) {
        reject(pathStr + 'del failed!!');
        throw err;
      }
      resolve();
    });
  }).then(res => {
    //console.log(res)
  });
}

//构建webpack 配置
for (let i = moduleList.length - 1; i >= 0; i--) {
  let MODULE = moduleList[i];
  //构建时要删除的模块目录 
  rmList.push(getRm(path.resolve(__dirname, '../dist', MODULE)));
  //添加每个模块的webpack 配置
  let MODULE_NAME = MODULE.split('/').pop();
  let entry = {};
  entry[MODULE_NAME] = `${MODULE}/index.js`;
  // console.log(`/e5/${MODULE.replace('./','')}`);
  let wpk = merge({}, webpackConfig, {
    entry: entry,
    output: {
      path: path.resolve(__dirname, '../dist', MODULE),
      // filename: 'static/js/[name].[contenthash:10].js'
      publicPath:`/e5/render/${MODULE.replace('./','')}`
    }
  });
  let htmlTemplate = `${MODULE}/index.html`

var checkPath = fs.existsSync(htmlTemplate);
  //如果目录存在 返回 true ，如果目录不存在 返回false
  if (checkPath == false) {
    htmlTemplate = path.resolve(__dirname, '../index.html')
  }

wpk.plugins.push(
    new HtmlWebpackPlugin({
      filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'),
      template: htmlTemplate,//如果html 不存在考虑用全局根目录下
      inject: true,
      // 这里要指定把哪些chunks追加到html中，默认会把所有入口的chunks追加到html中，这样是不行的
      // chunks: ['vendor', 'manifest', 'elementUI','app','hiui', MODULE_NAME],
      minify: {
        removeComments: true,//去除注释
        collapseWhitespace: true,//是否去除空格
        removeAttributeQuotes: true//去除空属性
      },
      compile: true
    }))
  webpackList.push(wpk);
}

module.exports = webpackList;

'use strict'
process.env.NODE_ENV = 'production'

require('./check-versions')()
const fs = require("fs")
const chalk = require('chalk')
const { merge } = require('webpack-merge');

//构建webpack 配置
for (let i = moduleList.length - 1; i >= 0; i--) {
  let MODULE = moduleList[i];
  //构建时要删除的模块目录 
  rmList.push(getRm(path.resolve(__dirname, '../dist', MODULE)));
  //添加每个模块的webpack 配置
  let MODULE_NAME = MODULE.split('/').pop();
  let entry = {};
  entry[MODULE_NAME] = `${moduleList[i]}/index.js`;
  let wpk = merge({}, webpackConfig, {
    entry: entry,
    output: {
      path: path.resolve(__dirname, '../dist', MODULE),
      // filename: 'static/js/[name].[contenthash:10].js'
    }
  });
  let htmlTemplate = `${MODULE}/index.html`

module.exports = webpackList;

Ignore Space Show notes View project/hivuiLogin/App.vue
<template> <div class="bg"> <div class="login_hd"> <div class="login_hd_logo" :style="logoStyle"> <!-- <div class="login_hd_logo_tip">登录</div>--> </div> </div> <div class="login_bd"> <div class="login_bd_bg" :style="bgStyle"></div> <div class="login_form"> <div id="showQr" class="loginMainBox" :hidden="currLoginType != 'com'"> <img @click="changeQr" class="icon-qrcode" :src="scanIcon" :hidden="!config.isScan" /> <div class="login-tip" :hidden="!config.isScan"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">扫码登录</div> </div> </div> <div class="login_form_bd"> <div class="error_tips"></div> <input type="hidden" name="directAction" value="" /> <input type="hidden" name="refererurl" value="" /> <div class="login_field"> <label>用户名/邮箱</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" placeholder="用户名" autofocus required autocomplete="off" @keyup.enter="loginFunc" /> <i class="fa fa-user"></i> </div> <div class="login_field"> <label>登录密码</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" placeholder="请输入密码" required autocomplete="off" @keyup.enter="loginFunc" /> <i class="fa fa-unlock-alt"></i> </div> <div class="saveCheckbox_box"> <label for="saveCheckbox" ><i :class=" 'fa ' + (isCheckRu ? 'fa-check-square-o' : 'fa-square-o') " ></i >记住用户名</label > <input type="checkbox" id="saveCheckbox" style="display: none" v-model="isCheckRu" @change="rememberUserEvent" /> </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :class="'loginBtn' + (loginLoading ? ' disabled' : '')" @click="loginFunc" > 登  录<i :hidden="!loginLoading" class="el-icon-loading" ></i> </button> </div> </div> <div class="login_form_foot"> <span class="forgetPw" @click="resetPw" ><i class="fa fa-lock"></i ><span style="margin-left: 5px">忘记密码?</span></span > <span class="login_form_app" ><i class="miniIcon" data-type="app"></i ><span style="margin-left: 5px">APP下载</span></span > </div> <div style="display: none"> <form id="singleSign" action="" method="post"> <input type="hidden" name="username" v-model="username" /> <input type="hidden" name="password" v-model="password" /> <input type="hidden" name="service" value="" /> <input type="hidden" name="loginUrl" value="" /> <input type="hidden" name="submit1" value="true" /> </form> </div> </div> </div> <div id="showCom" class="loginMainBox" :hidden="!(config.isScan && currLoginType == 'scan')" > <div class="login-title">扫码登录</div> <div class="login-tip"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">密码登录</div> </div> </div> <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt="" /> <div style=" position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); " > <!-- <img id="qrImg" src="./assets/logo.png" width="115px" height="115px" alt > --> <div class="login-error" style="display: none">登录失败!</div> <div class="qrcode-img" style="display: none"> <canvas height="130" width="130" style="height: 130px; width: 130px" ></canvas> <div class="qrcode-error"> <p>二维码失效</p> <button type="button" class="refresh">刷新二维码</button> </div> </div> </div> <div class="login-content nc-outer-box" style="display: none"> <div class="qrcode-login"> <div class="qrcode-success"> <!-- <img src="" alt=""/> --> <p>扫描成功！</p> <h4>请在手机上根据提示确认登录</h4> </div> </div> </div> <div class="qrDesc"> <div> <!-- <img src="" alt="" /> --> </div> <div class="qrDesc_right"> <span> 打开<a style="color: blue">海创科技App</a><br /> 扫一扫登录</span > </div> </div> </div> <div id="qrcode"></div> </div> </div> <div class="login_ft"> <div class="login_ft_main" id="login_copyright"> {{ this.config.copyright }} </div> </div> </div> </template> <script> import { baseLogin } from "./api/login"; import md5 from "md5"; import { projectName } from "./config"; import "font-awesome/css/font-awesome.css"; import { setToken, removeToken, getUserId, setUserId, removeUserId, } from "./utils/auth.js"; export default { components: {}, data() { return { comIcon: "./assets/computer.png", scanIcon: "./assets/qrcode_3.png", username: "", password: "", config: { title: "中海创科技", loginLogoImg: "./assets/Logo1.png", loginLogoImg_height: 56, loginLogoImg_width: 206, loginBgImg: "./assets/background.png", copyright: "版权所有 © 2020-2025 中海创科技", isSingleLogin: false, isScan: true, }, currLoginType: "com", rememberUserId: getUserId(), loginLoading: false, }; }, computed: { bgStyle() { return { "background-image": "url(" + this.config.loginBgImg + ")", }; }, logoStyle() { return { "background-image": "url(" + this.config.loginLogoImg + ")", height: this.config.loginLogoImg_height + "px", width: this.config.loginLogoImg_width + "px", }; }, isCheckRu() { return !!this.rememberUserId; }, }, mounted() { if (this.isCheckRu) { this.username = this.rememberUserId; } }, methods: { loginFunc() { this.defaultLogin(); console.log(this.username); console.log(this.password); }, defaultLogin() { /this.$refs.loginForm.validate(valid => { if (valid) {/ removeToken(); this.loginLoading = true; baseLogin({ username: this.username.trim(), password: md5(this.password), }) .then((response) => { const data = response; setToken(data.token); if (this.isCheckRu) { setUserId(this.username); } else { removeUserId(); } location = window.HIVUI_SETTING.mainPageUrl ? window.HIVUI_SETTING.mainPageUrl : "/" + projectName + "/hivuiMain/index.html#/"; }) .catch((error) => { this.loginLoading = false; }); /} else { console.log("error submit!!"); return false; } });/ }, changeQr() { this.currLoginType = "scan"; }, changeCom() { this.currLoginType = "com"; }, rememberUserEvent() { if (this.isCheckRu) { this.rememberUserId = ""; } else { this.rememberUserId = true; } }, resetPw() {}, }, }; </script> <style lang="less"> * { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } ul, li { list-style: none; } button { outline: none; border: none; } html, body { height: 100%; width: 100%; background: #fff; } input, body, button { font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; } body { font-size: 14px; color: #333; } .bg { height: 100%; width: 100%; position: relative; } .login_hd, .login_ft { height: 100px; width: 100%; position: fixed; z-index: 99; left: 0; } .login_hd_main, .login_ft_main { width: 1000px; height: 100%; margin: 0 auto; } .login_hd { top: 0; .login_hd_logo { height: 60px; width: 265px; position: absolute; top: 50px; left: 50px; background: no-repeat; img { height: 80px; width: 80px; margin-right: 90px; margin-top: 10px; float: right; } .login_hd_logo_tip { height: 32px; width: 84px; display: inline-block; padding: 0 20px; font-size: 22px; color: #fff; position: absolute; right: -104px; top: 0; bottom: 0; margin: auto; &:after { content: ""; height: 20px; width: 2px; position: absolute; top: 0; bottom: 0; left: 0px; background-color: #8691a8; margin: auto; } } } } .login_bd { overflow: hidden; min-width: 1210px; position: relative; height: 100%; background-color: #fff; .login_bd_bg { background: no-repeat center center; background-size: 100%; position: absolute; height: 100%; width: 100%; } .login_form { width: 370px; height: 360px; margin: auto; position: absolute; top: 0; left: 40%; right: 0; bottom: 0; background-color: #fff; padding: 1px; z-index: 100; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5); .login_form_hd { color: #333; font-weight: bold; padding: 0 18px; box-sizing: border-box; width: 100%; font-size: 16px; text-align: left; line-height: 44px; height: 44px; border-bottom: 1px solid #ccc; } .login_form_bd { min-height: 231px; height: 100%; position: relative; padding: 24px 40px 0; .login_form_foot { line-height: 40px; margin-top: 20px; &i { color: #0190d4; } .login_form_app, .login_download_app { color: #0190d4; float: right; cursor: pointer; &:hover { color: #0f406c; &i { color: #0f406c; } } } .miniIcon { display: inline-block; height: 16px; width: 16px; background-position: center center; background-size: 100%; margin-left: 20px; vertical-align: middle; &[data-type="app"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC"); } &[data-type="desk"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg=="); } } } .error_tips { position: absolute; line-height: 30px; font-size: 12px; color: #f60000; text-align: center; top: 0; left: 0; right: 0; width: 100%; margin: auto; } .login_field { position: relative; padding-bottom: 20px; label { line-height: 35px; display: block; height: 35px; font-size: 16px; } i { font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 40px; height: 40px; position: absolute; top: 35px; left: 0; margin: auto; } .login_field_text { height: 40px; width: 100%; line-height: 40px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; &::input-placeholder { color: #ccc; } } } .saveCheckbox_box { height: 35px; line-height: 35px; padding-left: 30px; position: relative; top: -10px; label { cursor: pointer; user-select: none; } i { font-size: 24px; position: absolute; top: 0; left: 2px; bottom: 0; margin: auto; height: 25px; width: 25px; color: #888; cursor: pointer; text-align: center; } .occasion { float: right; &:after { content: ""; background: no-repeat; width: 14px; height: 18px; position: absolute; top: 30%; pointer-events: none; right: 1px; } #selectStyle { border: none; outline: none; width: 62px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } } } .forgetPw { /* float: right; / color: #0190d4; cursor: pointer; margin-left: 5px; &:hover { color: blue; i { color: blue; } } } .login_form_btn { font-size: 13px; margin-top: 0px; .loginBtn { / background-color: #135189; / background-color: #06c; width: 100%; height: 40px; border: none; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; i { margin-left: 5px; } &:hover { background-color: #0f406c; } &.disabled { background-color: #ccc; &:hover { background-color: #ccc; } } } } /二维码/ .qrCodeImg { / position: absolute; / height: 139px; width: 139px; / left:40% !important; right:0 !important; bottom:12%; / margin-top: 10px; margin-left: 85px; z-index: 999; } } .login_form_google { width: 280px; position: absolute; top: 317px; left: 0; bottom: 0; color: #fff; line-height: 20px; text-align: center; font-weight: bold; font-size: 13px; cursor: pointer; user-select: none; & > a { color: #fff; } } .loginMainBox { .login-title { height: 18px; line-height: 18px; font-size: 16px; color: #889aa4; margin-top: 12px; margin-left: 12px; padding-bottom: 8px; font-weight: 700; } .login-tip { position: absolute; top: 10px; right: 68px; display: block; .poptip { background-color: #e6f9fc; line-height: 16px; position: relative; z-index: 9999; border: 1px solid #0073be; padding: 5px 10px; .poptip-arrow { position: absolute; z-index: 10; top: 8px; right: 0; span { position: absolute; width: 0; height: 0; border-color: hsla(0, 0%, 100%, 0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #e6f4fc; } em { position: absolute; width: 0; height: 0; border-color: hsla(0, 0%, 100%, 0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #0073be; border-right-color: #0073be; } } .poptip-content { font-size: 12px; font-weight: 400; color: #0073be; } } } .qrDesc { font-size: 12px; color: #666; width: 160px; margin: auto; overflow: hidden; line-height: 17px; margin-top: 230px; .qrDesc_right { position: relative; left: 50px; top: -35px; } } .scanMain { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); .qrcode-img { position: relative; margin: 20px auto; font-size: 14px; -webkit-box-shadow: 0 0 8px #ddd; box-shadow: 0 0 8px #ddd; opacity: 1; width: 140px; height: 140px; .qrcode-error { background: hsla(0, 0%, 100%, 0.95); position: absolute; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; p { font-weight: 700; color: #222; margin-top: 38px; margin-bottom: 8px; text-align: center; } .refresh { background: #f40; width: 110px; height: 34px; line-height: 34px; text-align: center; margin: 0 auto; background: #ff9000; border-color: #ff9000; display: block; color: #fff; border-radius: 3px; font-size: 14px; cursor: pointer; } } canvas { margin: 5px; } } .login-error { text-align: center; color: #222; font-weight: 700; } } /二维码切换登录/ .icon-qrcode { position: absolute; right: 5px; top: 5px; font-size: 52px; line-height: 52px; cursor: pointer; width: 56px; z-index: 999; } .login-content { width: 100%; margin: 0 auto; padding-top: 55px; .qrcode-success { text-align: center; margin-top: 20px; .iconfont { color: #c5c5c5; font-size: 36px; } h4, p { margin-top: 10px; font-size: 14px; } } } } } } .login_ft { bottom: 0; .login_ft_main { line-height: 60px; text-align: center; font-size: 14px; } } /登录对话框/ .loginDialog { height: 300px; width: 500px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 199; .loginDialog_hd { height: 35px; background-color: #0190d4; position: relative; h2 { height: 35px; line-height: 35px; font-size: 14px; color: #fff; padding: 0 20px; } .loginDialog_remove { position: absolute; top: 0; bottom: 0; right: 5px; height: 20px; width: 20px; background-color: #f30; cursor: pointer; margin: auto; text-align: center; &i { line-height: 20px; font-size: 18px; color: #fff; } &:hover { background-color: #f00; } } } .loginDialog_bd { width: 100%; height: 215px; background-color: #fff; } .loginDialog_ft { height: 50px; width: 100%; border-top: 1px solid #ccc; background-color: #f5f5f5; &:after { content: ""; display: block; clear: both; } button { display: block; padding: 0 12px; font-size: 14px; margin-top: 11px; height: 28px; line-height: 28px; text-align: center; cursor: pointer; color: #333333; background-color: #e9e9e9; float: right; margin-right: 10px; } .loginDialog_confirmBtn { background-color: #5cb85c; color: #fff; &:hover { background-color: #47a447; } } .loginDialog_cancelmBtn:hover { background-color: #ddd; } } } .loginMask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.5; z-index: 198; } #loginMsg { height: 170px; width: 400px; top: 10%; bottom: unset; z-index: 200; .loginDialog_bd { height: 85px; line-height: 85px; padding-left: 20px; font-size: 14px; } } .dropdown { border: 1px solid #bebebe; border-radius: 3px; width: 100px; position: absolute; right: 20px; top: 229px; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); z-index: 100; overflow: auto; cursor: default; li { margin: 5px; :hover { background: #0190d4; color: #fff; } &.sceneActive { background: #0190d4; color: #fff; } } } .hideIframe { display: none; } </style> <template> <div class="bg"> <div class="login_hd"> <div class="login_hd_logo" :style="logoStyle"> <!-- <div class="login_hd_logo_tip">登录</div>--> </div> </div> <div class="login_bd"> <div class="login_bd_bg" :style="bgStyle"></div> <div class="login_form"> <div id="showQr" class="loginMainBox" :hidden="currLoginType!='com'"> <img @click="changeQr" class="icon-qrcode" :src="scanIcon" :hidden="!config.isScan"/> <div class="login-tip" :hidden="!config.isScan"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">扫码登录</div> </div> </div> <div class="login_form_bd"> <div class="error_tips"></div> <input type="hidden" name="directAction" value=""> <input type="hidden" name="refererurl" value=""> <div class="login_field"> <label>用户名/邮箱</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" placeholder="用户名" autofocus required autocomplete="off" @keyup.enter="loginFunc"> <i class="fa fa-user"></i> </div> <div class="login_field"> <label>登录密码</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" placeholder="请输入密码" required autocomplete="off" @keyup.enter="loginFunc"> <i class="fa fa-unlock-alt"></i> </div> <div class="saveCheckbox_box"> <label for="saveCheckbox"><i :class="'fa '+(isCheckRu?'fa-check-square-o':'fa-square-o')"></i>记住用户名</label> <input type="checkbox" id="saveCheckbox" style="display:none;" v-model="isCheckRu" @change="rememberUserEvent"> </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :class="'loginBtn'+(loginLoading?' disabled':'')" @click="loginFunc">登  录<i :hidden="!loginLoading" class="el-icon-loading"></i></button> </div> </div> <div class="login_form_foot"> <span class="forgetPw" @click="resetPw"><i class="fa fa-lock"></i><span style="margin-left: 5px">忘记密码?</span></span> <span class="login_form_app"><i class="miniIcon" data-type="app"></i><span style="margin-left: 5px">APP下载</span></span> </div> <div style="display:none;"> <form id="singleSign" action="" method="post"> <input type="hidden" name="username" v-model="username"> <input type="hidden" name="password" v-model="password"> <input type="hidden" name="service" value=""> <input type="hidden" name="loginUrl" value=""> <input type="hidden" name="submit1" value="true"> </form> </div> </div> </div> <div id="showCom" class="loginMainBox" :hidden="!(config.isScan&&currLoginType=='scan')"> <div class="login-title">扫码登录</div> <div class="login-tip"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">密码登录</div> </div> </div> <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt=""/> <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"> <!-- <img id="qrImg" src="./assets/logo.png" width="115px" height="115px" alt > --> <div class="login-error" style="display: none">登录失败!</div> <div class="qrcode-img" style="display: none"> <canvas height="130" width="130" style="height: 130px; width: 130px;"></canvas> <div class="qrcode-error"> <p>二维码失效</p> <button type="button" class="refresh">刷新二维码</button> </div> </div> </div> <div class="login-content nc-outer-box" style="display: none"> <div class="qrcode-login"> <div class="qrcode-success"> <!-- <img src="" alt=""/> --> <p>扫描成功！</p> <h4>请在手机上根据提示确认登录</h4> </div> </div> </div> <div class="qrDesc"> <div> <!-- <img src="" alt="" /> --> </div> <div class="qrDesc_right"> <span> 打开<a style="color: blue">海创科技App</a><br> 扫一扫登录</span> </div> </div> </div> <div id="qrcode"></div> </div> </div> <div class="login_ft"> <div class="login_ft_main" id="login_copyright">{{this.config.copyright}}</div> </div> </div> </template> <script> import {baseLogin} from "./api/login"; import md5 from "md5"; import {projectName} from './config' import 'font-awesome/css/font-awesome.css' import{setToken,getUserId,setUserId,removeUserId} from "./utils/auth.js" export default { components:{ }, data(){ return { comIcon:"./assets/computer.png", scanIcon:"./assets/qrcode_3.png", username:"", password:"", config:{ title:"中海创科技", loginLogoImg:"./assets/Logo1.png", loginLogoImg_height:56, loginLogoImg_width:206, loginBgImg:"./assets/background.png", copyright:"版权所有 © 2020-2025 中海创科技", isSingleLogin:false, isScan:true, }, currLoginType:"com", rememberUserId:getUserId(), loginLoading:false, } }, computed:{ bgStyle(){ return { "background-image":"url("+this.config.loginBgImg+")", } }, logoStyle(){ return { "background-image":"url("+this.config.loginLogoImg+")", "height":this.config.loginLogoImg_height+"px", "width":this.config.loginLogoImg_width+"px", } }, isCheckRu(){ return !!this.rememberUserId; }, }, mounted(){ if(this.isCheckRu){ this.username=this.rememberUserId; } }, methods:{ loginFunc(){ this.defaultLogin(); console.log(this.username); console.log(this.password); }, defaultLogin() { /this.$refs.loginForm.validate(valid => { if (valid) {/ this.loginLoading = true; baseLogin({ username: this.username.trim(), password: md5(this.password) }).then(response => { const data = response setToken(data.token) if(this.isCheckRu){ setUserId(this.username); }else{ removeUserId(); } location=window.HIVUI_SETTING.mainPageUrl?window.HIVUI_SETTING.mainPageUrl:("/"+projectName+"/hivuiMain/index.html#/") }).catch(error => { this.loginLoading = false; }) /} else { console.log("error submit!!"); return false; } });/ }, changeQr(){ this.currLoginType="scan"; }, changeCom(){ this.currLoginType="com"; }, rememberUserEvent(){ if(this.isCheckRu){ this.rememberUserId=""; }else{ this.rememberUserId=true; } }, resetPw(){ } } } </script> <style lang="less"> { margin:0; padding: 0; box-sizing: border-box; } a{ text-decoration: none; } ul,li{ list-style: none; } button{ outline: none; border: none; } html,body{ height:100%; width: 100%; background: #fff; } input,body,button{ font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif; } body{ font-size: 14px; color: #333; } .bg{ height:100%; width:100%; position: relative; } .login_hd,.login_ft{ height:100px; width: 100%; position: fixed; z-index: 99; left:0; } .login_hd_main,.login_ft_main{ width: 1000px; height:100%; margin:0 auto; } .login_hd{ top:0; .login_hd_logo{ height: 60px; width: 265px; position: absolute; top:50px; left:50px; background:no-repeat; img{ height:80px; width: 80px; margin-right: 90px; margin-top: 10px; float: right; } .login_hd_logo_tip{ height: 32px; width: 84px; display: inline-block; padding: 0 20px; font-size: 22px; color: #fff; position: absolute; right: -104px; top: 0; bottom: 0; margin: auto; &:after{ content:""; height:20px; width:2px; position:absolute; top:0; bottom:0; left: 0px; background-color:#8691a8; margin:auto; } } } } .login_bd{ overflow: hidden; min-width: 1210px; position: relative; height:100%; background-color: #fff; .login_bd_bg { background: no-repeat center center; background-size:100%; position: absolute; height: 100%; width: 100%; } .login_form{ width: 370px; height: 360px; margin: auto; position: absolute; top: 0; left: 40%; right: 0; bottom: 0; background-color: #fff; padding: 1px; z-index: 100; box-shadow: 0 0 5px 1px rgba(0,0,0,0.5); .login_form_hd{ color: #333; font-weight: bold; padding: 0 18px; box-sizing: border-box; width: 100%; font-size: 16px; text-align: left; line-height: 44px; height:44px; border-bottom: 1px solid #ccc; } .login_form_bd{ min-height: 231px; height:100%; position: relative; padding: 24px 40px 0; .login_form_foot{ line-height: 40px; margin-top: 20px; &i{ color: #0190D4; } .login_form_app,.login_download_app{ color: #0190D4; float:right; cursor:pointer; &:hover{ color: #0f406c; &i{ color: #0f406c; } } } .miniIcon{ display: inline-block; height:16px; width: 16px; background-position: center center; background-size: 100%; margin-left: 20px; vertical-align: middle; &[data-type="app"]{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC"); } &[data-type="desk"]{ background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg=="); } } } .error_tips{ position: absolute; line-height: 30px; font-size: 12px; color: #f60000; text-align: center; top:0; left:0; right: 0; width: 100%; margin:auto; } .login_field{ position:relative; padding-bottom: 20px; label{ line-height: 35px; display: block; height: 35px; font-size: 16px; } i{ font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 40px; height: 40px; position: absolute; top: 35px; left:0; margin:auto; } .login_field_text{ height:40px; width: 100%; line-height: 40px; border:1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif; &::input-placeholder{ color:#ccc; } } } .saveCheckbox_box{ height: 35px; line-height: 35px; padding-left: 30px; position:relative; top:-10px; label{ cursor: pointer; user-select:none; } i{ font-size: 24px; position: absolute; top:0; left:2px; bottom:0; margin:auto; height: 25px; width: 25px; color:#888; cursor: pointer; text-align: center; } .occasion{ float: right; &:after{ content: ""; background: no-repeat; width: 14px; height: 18px; position: absolute; top: 30%; pointer-events: none; right:1px; } #selectStyle{ border: none; outline: none; width: 62px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } } } .forgetPw{ /* float: right; / color: #0190D4; cursor: pointer; margin-left: 5px; &:hover{ color: blue; i{ color: blue; } } } .login_form_btn{ font-size: 13px; margin-top: 0px; .loginBtn{ / background-color: #135189; / background-color: #06c; width: 100%; height:40px; border:none; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; i{ margin-left:5px; } &:hover{ background-color: #0f406c; } &.disabled{ background-color: #ccc; &:hover{ background-color: #ccc; } } } } /二维码/ .qrCodeImg{ / position: absolute; / height:139px; width:139px; / left:40% !important; right:0 !important; bottom:12%; / margin-top: 10px; margin-left: 85px; z-index: 999; } } .login_form_google{ width: 280px; position: absolute; top: 317px; left: 0; bottom: 0; color: #fff; line-height: 20px; text-align: center; font-weight: bold; font-size: 13px; cursor: pointer; user-select: none; &>a{ color:#fff; } } .loginMainBox{ .login-title{ height: 18px; line-height: 18px; font-size: 16px; color: #889aa4; margin-top: 12px; margin-left: 12px; padding-bottom: 8px; font-weight: 700; } .login-tip{ position: absolute; top: 10px; right: 68px; display: block; .poptip{ background-color: #e6f9fc; line-height: 16px; position: relative; z-index: 9999; border: 1px solid #0073be; padding: 5px 10px; .poptip-arrow { position: absolute; z-index: 10; top: 8px; right: 0; span{ position: absolute; width: 0; height: 0; border-color: hsla(0,0%,100%,0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #e6f4fc; } em { position: absolute; width: 0; height: 0; border-color: hsla(0,0%,100%,0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #0073be; border-right-color: #0073be; } } .poptip-content { font-size: 12px; font-weight: 400; color: #0073be; } } } .qrDesc{ font-size: 12px; color: #666; width: 160px; margin: auto; overflow: hidden; line-height: 17px; margin-top: 230px; .qrDesc_right{ position: relative; left: 50px; top: -35px; } } .scanMain{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); .qrcode-img { position: relative; margin: 20px auto; font-size: 14px; -webkit-box-shadow: 0 0 8px #ddd; box-shadow: 0 0 8px #ddd; opacity: 1; width: 140px; height: 140px; .qrcode-error { background: hsla(0,0%,100%,.95); position: absolute; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; p { font-weight: 700; color: #222; margin-top: 38px; margin-bottom: 8px; text-align: center; } .refresh { background: #f40; width: 110px; height: 34px; line-height: 34px; text-align: center; margin: 0 auto; background: #ff9000; border-color: #ff9000; display: block; color: #fff; border-radius: 3px; font-size: 14px; cursor: pointer; } } canvas { margin: 5px; } } .login-error{ text-align: center; color: #222; font-weight: 700; } } /二维码切换登录/ .icon-qrcode{ position: absolute; right: 5px; top: 5px; font-size: 52px; line-height: 52px; cursor: pointer; width: 56px; z-index:999 } .login-content { width: 100%; margin: 0 auto; padding-top: 55px; .qrcode-success { text-align: center; margin-top: 20px; .iconfont { color: #c5c5c5; font-size: 36px; } h4,p { margin-top: 10px; font-size: 14px; } } } } } } .login_ft{ bottom: 0; .login_ft_main{ line-height: 60px; text-align: center; font-size: 14px; } } /登录对话框*/ .loginDialog{ height:300px; width: 500px; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index: 199; .loginDialog_hd{ height:35px; background-color: #0190D4; position: relative; h2{ height:35px; line-height: 35px; font-size: 14px; color: #fff; padding: 0 20px; } .loginDialog_remove{ position: absolute; top:0; bottom:0; right:5px; height:20px; width: 20px; background-color: #f30; cursor: pointer; margin: auto; text-align: center; &i{ line-height: 20px; font-size: 18px; color: #fff; } &:hover{ background-color: #f00; } } } .loginDialog_bd{ width: 100%; height:215px; background-color: #fff; } .loginDialog_ft{ height:50px; width: 100%; border-top: 1px solid #ccc; background-color: #f5f5f5; &:after{ content: ""; display: block; clear: both; } button{ display: block; padding: 0 12px; font-size: 14px; margin-top: 11px; height:28px; line-height: 28px; text-align: center; cursor: pointer; color: #333333; background-color: #e9e9e9; float: right; margin-right:10px; } .loginDialog_confirmBtn{ background-color: #5cb85c; color: #fff; &:hover{ background-color: #47a447; } } .loginDialog_cancelmBtn:hover{ background-color: #ddd; } } } .loginMask{ position: absolute; top:0; left:0; right:0; bottom:0; background-color: #000; opacity: 0.5; z-index: 198; } #loginMsg{ height:170px; width: 400px; top:10%; bottom: unset; z-index: 200; .loginDialog_bd{ height:85px; line-height: 85px; padding-left: 20px; font-size: 14px; } } .dropdown{ border: 1px solid #bebebe; border-radius: 3px; width: 100px; position: absolute; right: 20px; top: 229px; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2); box-shadow: 0 0 10px rgba(0,0,0,.2); z-index: 100; overflow: auto; cursor: default; li{ margin: 5px; :hover{ background: #0190D4; color: #fff; } &.sceneActive{ background: #0190D4; color: #fff; } } } .hideIframe{ display:none; } </style>

Ignore Space Show notes View

project/hivuiLogin/App.vue

<template>
  <div class="bg">
    <div class="login_hd">
      <div class="login_hd_logo" :style="logoStyle">
        
      </div>
    </div>
    <div class="login_bd">
      <div class="login_bd_bg" :style="bgStyle"></div>
      <div class="login_form">
        <div id="showQr" class="loginMainBox" :hidden="currLoginType != 'com'">
          <img
            @click="changeQr"
            class="icon-qrcode"
            :src="scanIcon"
            :hidden="!config.isScan"
          />
          <div class="login-tip" :hidden="!config.isScan">
            <div class="poptip">
              <div class="poptip-arrow">
                <em></em>
                <span></span>
              </div>
              <div class="poptip-content">扫码登录</div>
            </div>
          </div>
          <div class="login_form_bd">
            <div class="error_tips"></div>
            <input type="hidden" name="directAction" value="" />
            <input type="hidden" name="refererurl" value="" />
            <div class="login_field">
              <label>用户名/邮箱</label>
              <input
                class="login_field_text"
                v-model="username"
                type="text"
                id="txtUserName"
                name="userName"
                placeholder="用户名"
                autofocus
                required
                autocomplete="off"
                @keyup.enter="loginFunc"
              />
              <i class="fa fa-user"></i>
            </div>
            <div class="login_field">
              <label>登录密码</label>
              <input
                class="login_field_text"
                v-model="password"
                type="text"
                onfocus="this.type='password'"
                id="txtPassword"
                name="password"
                placeholder="请输入密码"
                required
                autocomplete="off"
                @keyup.enter="loginFunc"
              />
              <i class="fa fa-unlock-alt"></i>
            </div>
            <div class="saveCheckbox_box">
              <label for="saveCheckbox"
                ><i
                  :class="
                    'fa ' + (isCheckRu ? 'fa-check-square-o' : 'fa-square-o')
                  "
                ></i
                >记住用户名</label
              >
              <input
                type="checkbox"
                id="saveCheckbox"
                style="display: none"
                v-model="isCheckRu"
                @change="rememberUserEvent"
              />
            </div>
            <div class="login_form_btn">
              <div class="login_btn_area">
                <button
                  :class="'loginBtn' + (loginLoading ? ' disabled' : '')"
                  @click="loginFunc"
                >
                  登&nbsp;&nbsp;录<i
                    :hidden="!loginLoading"
                    class="el-icon-loading"
                  ></i>
                </button>
              </div>
            </div>
            <div class="login_form_foot">
              <span class="forgetPw" @click="resetPw"
                ><i class="fa fa-lock"></i
                ><span style="margin-left: 5px">忘记密码?</span></span
              >
              <span class="login_form_app"
                ><i class="miniIcon" data-type="app"></i
                ><span style="margin-left: 5px">APP下载</span></span
              >
            </div>
            <div style="display: none">
              <form id="singleSign" action="" method="post">
                <input type="hidden" name="username" v-model="username" />
                <input type="hidden" name="password" v-model="password" />
                <input type="hidden" name="service" value="" />
                <input type="hidden" name="loginUrl" value="" />
                <input type="hidden" name="submit1" value="true" />
              </form>
            </div>
          </div>
        </div>
        <div
          id="showCom"
          class="loginMainBox"
          :hidden="!(config.isScan && currLoginType == 'scan')"
        >
          <div class="login-title">扫码登录</div>
          <div class="login-tip">
            <div class="poptip">
              <div class="poptip-arrow">
                <em></em>
                <span></span>
              </div>
              <div class="poptip-content">密码登录</div>
            </div>
          </div>
          <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt="" />
          <div
            style="
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            "
          >
            
            <div class="login-error" style="display: none">登录失败!</div>
            <div class="qrcode-img" style="display: none">
              <canvas
                height="130"
                width="130"
                style="height: 130px; width: 130px"
              ></canvas>
              <div class="qrcode-error">
                <p>二维码失效</p>
                <button type="button" class="refresh">刷新二维码</button>
              </div>
            </div>
          </div>
          <div class="login-content nc-outer-box" style="display: none">
            <div class="qrcode-login">
              <div class="qrcode-success">
                
                <p>扫描成功！</p>
                <h4>请在手机上根据提示确认登录</h4>
              </div>
            </div>
          </div>
          <div class="qrDesc">
            <div>
              
            </div>
            <div class="qrDesc_right">
              <span>
                打开<a style="color: blue">海创科技App</a><br />
                扫一扫登录</span
              >
            </div>
          </div>
        </div>
        <div id="qrcode"></div>
      </div>
    </div>
    <div class="login_ft">
      <div class="login_ft_main" id="login_copyright">
        {{ this.config.copyright }}
      </div>
    </div>
  </div>
</template>
<script>
import { baseLogin } from "./api/login";
import md5 from "md5";
import { projectName } from "./config";
import "font-awesome/css/font-awesome.css";
import {
  setToken,
  removeToken,
  getUserId,
  setUserId,
  removeUserId,
} from "./utils/auth.js";
export default {
  components: {},
  data() {
    return {
      comIcon: "./assets/computer.png",
      scanIcon: "./assets/qrcode_3.png",
      username: "",
      password: "",
      config: {
        title: "中海创科技",
        loginLogoImg: "./assets/Logo1.png",
        loginLogoImg_height: 56,
        loginLogoImg_width: 206,
        loginBgImg: "./assets/background.png",
        copyright: "版权所有 © 2020-2025 中海创科技",
        isSingleLogin: false,
        isScan: true,
      },
      currLoginType: "com",
      rememberUserId: getUserId(),
      loginLoading: false,
    };
  },
  computed: {
    bgStyle() {
      return {
        "background-image": "url(" + this.config.loginBgImg + ")",
      };
    },
    logoStyle() {
      return {
        "background-image": "url(" + this.config.loginLogoImg + ")",
        height: this.config.loginLogoImg_height + "px",
        width: this.config.loginLogoImg_width + "px",
      };
    },
    isCheckRu() {
      return !!this.rememberUserId;
    },
  },
  mounted() {
    if (this.isCheckRu) {
      this.username = this.rememberUserId;
    }
  },
  methods: {
    loginFunc() {
      this.defaultLogin();
      console.log(this.username);
      console.log(this.password);
    },
    defaultLogin() {
      /*this.$refs.loginForm.validate(valid => {
                if (valid) {*/
      removeToken();
      this.loginLoading = true;
      baseLogin({
        username: this.username.trim(),
        password: md5(this.password),
      })
        .then((response) => {
          const data = response;
          setToken(data.token);
          if (this.isCheckRu) {
            setUserId(this.username);
          } else {
            removeUserId();
          }
          location = window.HIVUI_SETTING.mainPageUrl
            ? window.HIVUI_SETTING.mainPageUrl
            : "/" + projectName + "/hivuiMain/index.html#/";
        })
        .catch((error) => {
          this.loginLoading = false;
        });
      /*} else {
                    console.log("error submit!!");
                    return false;
                }
            });*/
    },
    changeQr() {
      this.currLoginType = "scan";
    },
    changeCom() {
      this.currLoginType = "com";
    },
    rememberUserEvent() {
      if (this.isCheckRu) {
        this.rememberUserId = "";
      } else {
        this.rememberUserId = true;
      }
    },
    resetPw() {},
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
button {
  outline: none;
  border: none;
}
html,
body {
  height: 100%;
  width: 100%;
  background: #fff;
}
input,
body,
button {
  font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
    helvetica, clean, sans-serif;
}
body {
  font-size: 14px;
  color: #333;
}
.bg {
  height: 100%;
  width: 100%;
  position: relative;
}
.login_hd,
.login_ft {
  height: 100px;
  width: 100%;
  position: fixed;
  z-index: 99;
  left: 0;
}
.login_hd_main,
.login_ft_main {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}
.login_hd {
  top: 0;
  .login_hd_logo {
    height: 60px;
    width: 265px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: no-repeat;
    img {
      height: 80px;
      width: 80px;
      margin-right: 90px;
      margin-top: 10px;
      float: right;
    }
    .login_hd_logo_tip {
      height: 32px;
      width: 84px;
      display: inline-block;
      padding: 0 20px;
      font-size: 22px;
      color: #fff;
      position: absolute;
      right: -104px;
      top: 0;
      bottom: 0;
      margin: auto;
      &:after {
        content: "";
        height: 20px;
        width: 2px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0px;
        background-color: #8691a8;
        margin: auto;
      }
    }
  }
}
.login_bd {
  overflow: hidden;
  min-width: 1210px;
  position: relative;
  height: 100%;
  background-color: #fff;
  .login_bd_bg {
    background: no-repeat center center;
    background-size: 100%;
    position: absolute;
    height: 100%;
    width: 100%;
  }
  .login_form {
    width: 370px;
    height: 360px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 40%;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 1px;
    z-index: 100;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
    .login_form_hd {
      color: #333;
      font-weight: bold;
      padding: 0 18px;
      box-sizing: border-box;
      width: 100%;
      font-size: 16px;
      text-align: left;
      line-height: 44px;
      height: 44px;
      border-bottom: 1px solid #ccc;
    }
    .login_form_bd {
      min-height: 231px;
      height: 100%;
      position: relative;
      padding: 24px 40px 0;
      .login_form_foot {
        line-height: 40px;
        margin-top: 20px;
        &i {
          color: #0190d4;
        }
        .login_form_app,
        .login_download_app {
          color: #0190d4;
          float: right;
          cursor: pointer;
          &:hover {
            color: #0f406c;
            &i {
              color: #0f406c;
            }
          }
        }
        .miniIcon {
          display: inline-block;
          height: 16px;
          width: 16px;
          background-position: center center;
          background-size: 100%;
          margin-left: 20px;
          vertical-align: middle;
          &[data-type="app"] {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC");
          }
          &[data-type="desk"] {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg==");
          }
        }
      }
      .error_tips {
        position: absolute;
        line-height: 30px;
        font-size: 12px;
        color: #f60000;
        text-align: center;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: auto;
      }
      .login_field {
        position: relative;
        padding-bottom: 20px;
        label {
          line-height: 35px;
          display: block;
          height: 35px;
          font-size: 16px;
        }
        i {
          font-size: 20px;
          color: #aaa;
          width: 35px;
          text-align: center;
          line-height: 40px;
          height: 40px;
          position: absolute;
          top: 35px;
          left: 0;
          margin: auto;
        }
        .login_field_text {
          height: 40px;
          width: 100%;
          line-height: 40px;
          border: 1px solid #ccc;
          border-radius: 5px;
          background-color: #fff;
          font-size: 16px;
          color: #000;
          padding-left: 35px;
          box-sizing: border-box;
          font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
            helvetica, clean, sans-serif;
          &::input-placeholder {
            color: #ccc;
          }
        }
      }
      .saveCheckbox_box {
        height: 35px;
        line-height: 35px;
        padding-left: 30px;
        position: relative;
        top: -10px;
        label {
          cursor: pointer;
          user-select: none;
        }
        i {
          font-size: 24px;
          position: absolute;
          top: 0;
          left: 2px;
          bottom: 0;
          margin: auto;
          height: 25px;
          width: 25px;
          color: #888;
          cursor: pointer;
          text-align: center;
        }
        .occasion {
          float: right;
          &:after {
            content: "";
            background: no-repeat;
            width: 14px;
            height: 18px;
            position: absolute;
            top: 30%;
            pointer-events: none;
            right: 1px;
          }
          #selectStyle {
            border: none;
            outline: none;
            width: 62px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
          }
        }
      }
      .forgetPw {
        /* float: right; */
        color: #0190d4;
        cursor: pointer;
        margin-left: 5px;
        &:hover {
          color: blue;
          i {
            color: blue;
          }
        }
      }
      .login_form_btn {
        font-size: 13px;
        margin-top: 0px;
        .loginBtn {
          /* background-color: #135189; */
          background-color: #06c;
          width: 100%;
          height: 40px;
          border: none;
          border-radius: 5px;
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          cursor: pointer;
          display: inline-block;
          i {
            margin-left: 5px;
          }
          &:hover {
            background-color: #0f406c;
          }
          &.disabled {
            background-color: #ccc;
            &:hover {
              background-color: #ccc;
            }
          }
        }
      }
      /*二维码*/
      .qrCodeImg {
        /* position: absolute; */
        height: 139px;
        width: 139px;
        /* left:40% !important;
                right:0 !important;
                bottom:12%; */
        margin-top: 10px;
        margin-left: 85px;
        z-index: 999;
      }
    }
    .login_form_google {
      width: 280px;
      position: absolute;
      top: 317px;
      left: 0;
      bottom: 0;
      color: #fff;
      line-height: 20px;
      text-align: center;
      font-weight: bold;
      font-size: 13px;
      cursor: pointer;
      user-select: none;
      & > a {
        color: #fff;
      }
    }
    .loginMainBox {
      .login-title {
        height: 18px;
        line-height: 18px;
        font-size: 16px;
        color: #889aa4;
        margin-top: 12px;
        margin-left: 12px;
        padding-bottom: 8px;
        font-weight: 700;
      }
      .login-tip {
        position: absolute;
        top: 10px;
        right: 68px;
        display: block;
        .poptip {
          background-color: #e6f9fc;
          line-height: 16px;
          position: relative;
          z-index: 9999;
          border: 1px solid #0073be;
          padding: 5px 10px;
          .poptip-arrow {
            position: absolute;
            z-index: 10;
            top: 8px;
            right: 0;
            span {
              position: absolute;
              width: 0;
              height: 0;
              border-color: hsla(0, 0%, 100%, 0);
              border-style: solid;
              overflow: hidden;
              top: 0;
              left: 0;
              border-width: 6px 0 6px 6px;
              border-left-color: #e6f4fc;
            }
            em {
              position: absolute;
              width: 0;
              height: 0;
              border-color: hsla(0, 0%, 100%, 0);
              border-style: solid;
              overflow: hidden;
              top: 0;
              left: 0;
              border-width: 6px 0 6px 6px;
              border-left-color: #0073be;
              border-right-color: #0073be;
            }
          }
          .poptip-content {
            font-size: 12px;
            font-weight: 400;
            color: #0073be;
          }
        }
      }
      .qrDesc {
        font-size: 12px;
        color: #666;
        width: 160px;
        margin: auto;
        overflow: hidden;
        line-height: 17px;
        margin-top: 230px;
        .qrDesc_right {
          position: relative;
          left: 50px;
          top: -35px;
        }
      }
      .scanMain {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .qrcode-img {
          position: relative;
          margin: 20px auto;
          font-size: 14px;
          -webkit-box-shadow: 0 0 8px #ddd;
          box-shadow: 0 0 8px #ddd;
          opacity: 1;
          width: 140px;
          height: 140px;
          .qrcode-error {
            background: hsla(0, 0%, 100%, 0.95);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            p {
              font-weight: 700;
              color: #222;
              margin-top: 38px;
              margin-bottom: 8px;
              text-align: center;
            }
            .refresh {
              background: #f40;
              width: 110px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              margin: 0 auto;
              background: #ff9000;
              border-color: #ff9000;
              display: block;
              color: #fff;
              border-radius: 3px;
              font-size: 14px;
              cursor: pointer;
            }
          }
          canvas {
            margin: 5px;
          }
        }
        .login-error {
          text-align: center;
          color: #222;
          font-weight: 700;
        }
      }
      /*二维码切换登录*/
      .icon-qrcode {
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 52px;
        line-height: 52px;
        cursor: pointer;
        width: 56px;
        z-index: 999;
      }

.login-content {
        width: 100%;
        margin: 0 auto;
        padding-top: 55px;
        .qrcode-success {
          text-align: center;
          margin-top: 20px;
          .iconfont {
            color: #c5c5c5;
            font-size: 36px;
          }
          h4,
          p {
            margin-top: 10px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
.login_ft {
  bottom: 0;
  .login_ft_main {
    line-height: 60px;
    text-align: center;
    font-size: 14px;
  }
}
/*登录对话框*/
.loginDialog {
  height: 300px;
  width: 500px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 199;
  .loginDialog_hd {
    height: 35px;
    background-color: #0190d4;
    position: relative;
    h2 {
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      color: #fff;
      padding: 0 20px;
    }
    .loginDialog_remove {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 5px;
      height: 20px;
      width: 20px;
      background-color: #f30;
      cursor: pointer;
      margin: auto;
      text-align: center;
      &i {
        line-height: 20px;
        font-size: 18px;
        color: #fff;
      }
      &:hover {
        background-color: #f00;
      }
    }
  }
  .loginDialog_bd {
    width: 100%;
    height: 215px;
    background-color: #fff;
  }
  .loginDialog_ft {
    height: 50px;
    width: 100%;
    border-top: 1px solid #ccc;
    background-color: #f5f5f5;
    &:after {
      content: "";
      display: block;
      clear: both;
    }
    button {
      display: block;
      padding: 0 12px;
      font-size: 14px;
      margin-top: 11px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      cursor: pointer;
      color: #333333;
      background-color: #e9e9e9;
      float: right;
      margin-right: 10px;
    }
    .loginDialog_confirmBtn {
      background-color: #5cb85c;
      color: #fff;
      &:hover {
        background-color: #47a447;
      }
    }
    .loginDialog_cancelmBtn:hover {
      background-color: #ddd;
    }
  }
}
.loginMask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.5;
  z-index: 198;
}
#loginMsg {
  height: 170px;
  width: 400px;
  top: 10%;
  bottom: unset;
  z-index: 200;
  .loginDialog_bd {
    height: 85px;
    line-height: 85px;
    padding-left: 20px;
    font-size: 14px;
  }
}
.dropdown {
  border: 1px solid #bebebe;
  border-radius: 3px;
  width: 100px;
  position: absolute;
  right: 20px;
  top: 229px;
  background: #fff;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
  overflow: auto;
  cursor: default;
  li {
    margin: 5px;
    :hover {
      background: #0190d4;
      color: #fff;
    }
    &.sceneActive {
      background: #0190d4;
      color: #fff;
    }
  }
}
.hideIframe {
  display: none;
}
</style>

}
    },
    computed:{
        bgStyle(){
            return {
                "background-image":"url("+this.config.loginBgImg+")",
            }
        },
        logoStyle(){
            return {
                "background-image":"url("+this.config.loginLogoImg+")",
                "height":this.config.loginLogoImg_height+"px",
                "width":this.config.loginLogoImg_width+"px",
            }
        },
        isCheckRu(){
            return !!this.rememberUserId;
        },
    },
    mounted(){
        if(this.isCheckRu){
            this.username=this.rememberUserId;
        }
    },
    methods:{
        loginFunc(){
            this.defaultLogin();
            console.log(this.username);
            console.log(this.password);
        },
        defaultLogin() {
            /*this.$refs.loginForm.validate(valid => {
                if (valid) {*/
                    this.loginLoading = true;
                    baseLogin({ username: this.username.trim(), password: md5(this.password) }).then(response => {
                        const data = response
                        setToken(data.token)
                        if(this.isCheckRu){
                            setUserId(this.username);
                        }else{
                            removeUserId();
                        }
                        location=window.HIVUI_SETTING.mainPageUrl?window.HIVUI_SETTING.mainPageUrl:("/"+projectName+"/hivuiMain/index.html#/")
                    }).catch(error => {
                        this.loginLoading = false;
                    })
                /*} else {
                    console.log("error submit!!");
                    return false;
                }
            });*/
        },
        changeQr(){
            this.currLoginType="scan";
        },
        changeCom(){
            this.currLoginType="com";
        },
        rememberUserEvent(){
            if(this.isCheckRu){
                this.rememberUserId="";
            }else{
                this.rememberUserId=true;
            }
        },
        resetPw(){

}
    }
}
</script>
<style lang="less">
*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
}
a{
	text-decoration: none;
}
ul,li{
	list-style: none;
}
button{
	outline: none;
	border: none;
}
html,body{
	height:100%;
	width: 100%;
    background: #fff;
}
input,body,button{
	font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif;
}
body{
	font-size: 14px;
	color: #333;
}
.bg{
    height:100%;
    width:100%;
    position: relative;
}
.login_hd,.login_ft{
	height:100px;
	width: 100%;
	position: fixed;
	z-index: 99;
	left:0;
}
.login_hd_main,.login_ft_main{
	width: 1000px;
	height:100%;
	margin:0 auto;
}
.login_hd{
    top:0;
    .login_hd_logo{
        height: 60px;
        width: 265px;
        position: absolute;
        top:50px;
        left:50px;
        background:no-repeat;
        img{
            height:80px;
            width: 80px;
            margin-right: 90px;
            margin-top: 10px;
            float: right;
        }
        .login_hd_logo_tip{
            height: 32px;
            width: 84px;
            display: inline-block;
            padding: 0 20px;
            font-size: 22px;
            color: #fff;
            position: absolute;
            right: -104px;
            top: 0;
            bottom: 0;
            margin: auto;
            &:after{
                content:"";
                height:20px;
                width:2px;
                position:absolute;
                top:0;
                bottom:0;
                left: 0px;
                background-color:#8691a8;
                margin:auto;
            }
        }
    }
}
.login_bd{
	overflow: hidden;
	min-width: 1210px;
	position: relative;
	height:100%;
    background-color: #fff;
    .login_bd_bg {
        background:  no-repeat center center;
        background-size:100%;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .login_form{
        width: 370px;
        height: 360px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 40%;
        right: 0;
        bottom: 0;
        background-color: #fff;
        padding: 1px;
        z-index: 100;
        box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
        .login_form_hd{
            color: #333;
            font-weight: bold;
            padding: 0 18px;
            box-sizing: border-box;
            width: 100%;
            font-size: 16px;
            text-align: left;
            line-height: 44px;
            height:44px;
            border-bottom: 1px solid #ccc;
        }
        .login_form_bd{
            min-height: 231px;
            height:100%;
            position: relative;
            padding: 24px 40px 0;
            .login_form_foot{
                line-height: 40px;
                margin-top: 20px;
                &i{
                    color: #0190D4;
                }
                .login_form_app,.login_download_app{
                    color: #0190D4;
                    float:right;
                    cursor:pointer;
                    &:hover{
                        color: #0f406c;
                        &i{
                            color: #0f406c;
                        }
                    }
                }
                .miniIcon{
                    display: inline-block;
                    height:16px;
                    width: 16px;
                    background-position: center center;
                    background-size: 100%;
                    margin-left: 20px;
                    vertical-align: middle;
                    &[data-type="app"]{
                        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC");
                    }
                    &[data-type="desk"]{
                        background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg==");
                    }
                }
            }
            .error_tips{
                position: absolute;
                line-height: 30px;
                font-size: 12px;
                color: #f60000;
                text-align: center;
                top:0;
                left:0;
                right: 0;
                width: 100%;
                margin:auto;
            }
            .login_field{
                position:relative;
                padding-bottom: 20px;
                label{
                    line-height: 35px;
                    display: block;
                    height: 35px;
                    font-size: 16px;
                }
                i{
                    font-size: 20px;
                    color: #aaa;
                    width: 35px;
                    text-align: center;
                    line-height: 40px;
                    height: 40px;
                    position: absolute;
                    top: 35px;
                    left:0;
                    margin:auto;
                }
                .login_field_text{
                    height:40px;
                    width: 100%;
                    line-height: 40px;
                    border:1px solid #ccc;
                    border-radius: 5px;
                    background-color: #fff;
                    font-size: 16px;
                    color: #000;
                    padding-left: 35px;
                    box-sizing: border-box;
                    font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif;
                    &::input-placeholder{
                        color:#ccc;
                    }
                }
            }
            .saveCheckbox_box{
                height: 35px;
                line-height: 35px;
                padding-left: 30px;
                position:relative;
                top:-10px;
                label{
                    cursor: pointer;
                    user-select:none;
                }
                i{
                    font-size: 24px;
                    position: absolute;
                    top:0;
                    left:2px;
                    bottom:0;
                    margin:auto;
                    height: 25px;
                    width: 25px;
                    color:#888;
                    cursor: pointer;
                    text-align: center;
                }
                .occasion{
                    float: right;
                    &:after{
                        content: "";
                        background:  no-repeat;
                        width: 14px;
                        height: 18px;
                        position: absolute;
                        top: 30%;
                        pointer-events: none;
                        right:1px;
                    }
                    #selectStyle{
                        border: none;
                        outline: none;
                        width: 62px;
                        appearance: none;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                    }
                }
            }
            .forgetPw{
                /* float: right; */
                color: #0190D4;
                cursor: pointer;
                margin-left: 5px;
                &:hover{
                    color: blue;
                    i{
                        color: blue;
                    }
                }
            }
            .login_form_btn{
                font-size: 13px;
                margin-top: 0px;
                .loginBtn{
                    /* background-color: #135189; */
                    background-color: #06c; 
                    width: 100%;
                    height:40px;
                    border:none;
                    border-radius: 5px;
                    color: #fff;
                    font-size: 16px;
                    font-weight: bold;
                    text-align: center;
                    cursor: pointer;
                    display: inline-block;
                    i{
                        margin-left:5px;
                    }
                    &:hover{
                        background-color: #0f406c;
                    }
                    &.disabled{
                        background-color: #ccc; 
                        &:hover{
                            background-color: #ccc; 
                        }
                    }
                }
            }
            /*二维码*/
            .qrCodeImg{
                /* position: absolute; */
                height:139px;
                width:139px;
                /* left:40% !important;
                right:0 !important;
                bottom:12%; */
                margin-top: 10px;
                margin-left: 85px;
                z-index: 999;
            }
        }
        .login_form_google{
            width: 280px;
            position: absolute;
            top: 317px;
            left: 0;
            bottom: 0;
            color: #fff;
            line-height: 20px;
            text-align: center;
            font-weight: bold;
            font-size: 13px;
            cursor: pointer;
            user-select: none;
            &>a{
                color:#fff;
            }
        }
        .loginMainBox{
            .login-title{
                height: 18px;
                line-height: 18px;
                font-size: 16px;
                color: #889aa4;
                margin-top: 12px;
                margin-left: 12px;
                padding-bottom: 8px;
                font-weight: 700;
            }
            .login-tip{
                position: absolute;
                top: 10px;
                right: 68px;
                display: block;
                .poptip{
                    background-color: #e6f9fc;
                    line-height: 16px;
                    position: relative;
                    z-index: 9999;
                    border: 1px solid #0073be;
                    padding: 5px 10px;
                    .poptip-arrow {
                        position: absolute;
                        z-index: 10;
                        top: 8px;
                        right: 0;
                        span{
                            position: absolute;
                            width: 0;
                            height: 0;
                            border-color: hsla(0,0%,100%,0);
                            border-style: solid;
                            overflow: hidden;
                            top: 0;
                            left: 0;
                            border-width: 6px 0 6px 6px;
                            border-left-color: #e6f4fc;
                        }
                        em {
                            position: absolute;
                            width: 0;
                            height: 0;
                            border-color: hsla(0,0%,100%,0);
                            border-style: solid;
                            overflow: hidden;
                            top: 0;
                            left: 0;
                            border-width: 6px 0 6px 6px;
                            border-left-color: #0073be;
                            border-right-color: #0073be;
                        }
                    }
                    .poptip-content {
                        font-size: 12px;
                        font-weight: 400;
                        color: #0073be;
                    }
                }
            }
            .qrDesc{
                font-size: 12px;
                color: #666;
                width: 160px;
                margin: auto;
                overflow: hidden;
                line-height: 17px;
                margin-top: 230px;
                .qrDesc_right{
                    position: relative;
                    left: 50px;
                    top: -35px;
                }
            }
            .scanMain{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                .qrcode-img {
                    position: relative;
                    margin: 20px auto;
                    font-size: 14px;
                    -webkit-box-shadow: 0 0 8px #ddd;
                    box-shadow: 0 0 8px #ddd;
                    opacity: 1;
                    width: 140px;
                    height: 140px;
                    .qrcode-error {
                        background: hsla(0,0%,100%,.95);
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 9999;
                        width: 100%;
                        height: 100%;
                        p {
                            font-weight: 700;
                            color: #222;
                            margin-top: 38px;
                            margin-bottom: 8px;
                            text-align: center;
                        }
                        .refresh {
                            background: #f40;
                            width: 110px;
                            height: 34px;
                            line-height: 34px;
                            text-align: center;
                            margin: 0 auto;
                            background: #ff9000;
                            border-color: #ff9000;
                            display: block;
                            color: #fff;
                            border-radius: 3px;
                            font-size: 14px;
                            cursor: pointer;
                        }
                    }
                    canvas {
                        margin: 5px;
                    }
                }
                .login-error{
                    text-align: center;
                    color: #222;
                    font-weight: 700;
                }
            }
            /*二维码切换登录*/
            .icon-qrcode{
                position: absolute;
                right: 5px;
                top: 5px;
                font-size: 52px;
                line-height: 52px;
                cursor: pointer;
                width: 56px;
                z-index:999
            }

.login-content {
                width: 100%;
                margin: 0 auto;
                padding-top: 55px;
                .qrcode-success {
                    text-align: center;
                    margin-top: 20px;
                    .iconfont {
                        color: #c5c5c5;
                        font-size: 36px;
                    }
                    h4,p {
                        margin-top: 10px;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
.login_ft{
	bottom: 0;
    .login_ft_main{
        line-height: 60px;
        text-align: center;
        font-size: 14px;
    }
}
/*登录对话框*/
.loginDialog{
	height:300px;
	width: 500px;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	z-index: 199;
    .loginDialog_hd{
        height:35px;
        background-color: #0190D4;
        position: relative;
        h2{
            height:35px;
            line-height: 35px;
            font-size: 14px;
            color: #fff;
            padding: 0 20px;
        }
        .loginDialog_remove{
            position: absolute;
            top:0;
            bottom:0;
            right:5px;
            height:20px;
            width: 20px;
            background-color: #f30;
            cursor: pointer;
            margin: auto;
            text-align: center;
            &i{
                line-height: 20px;
                font-size: 18px;
                color: #fff;
            }
            &:hover{
                background-color: #f00;
            }
        }
    }
    .loginDialog_bd{
        width: 100%;
        height:215px;
        background-color: #fff;
    }
    .loginDialog_ft{
        height:50px;
        width: 100%;
        border-top: 1px solid #ccc;
        background-color: #f5f5f5;
        &:after{
            content: "";
            display: block;
            clear: both;
        }
        button{
            display: block;
            padding: 0 12px;
            font-size: 14px;
            margin-top: 11px;
            height:28px;
            line-height: 28px;
            text-align: center;
            cursor: pointer;
            color: #333333;
            background-color: #e9e9e9;
            float: right;
            margin-right:10px;
        }
        .loginDialog_confirmBtn{
            background-color: #5cb85c;
            color: #fff;
            &:hover{
                background-color: #47a447;
            }
        }
        .loginDialog_cancelmBtn:hover{
            background-color: #ddd;
        }
    }
}
.loginMask{
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: #000;
	opacity: 0.5;
	z-index: 198;
}
#loginMsg{
	height:170px;
	width: 400px;
	top:10%;
	bottom: unset;
    z-index: 200;
    .loginDialog_bd{
        height:85px;
        line-height: 85px;
        padding-left: 20px;
        font-size: 14px;
    }
}
.dropdown{
    border: 1px solid #bebebe;
    border-radius: 3px;
    width: 100px;
    position: absolute;
    right: 20px;
    top: 229px;
    background: #fff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    z-index: 100;
    overflow: auto;
    cursor: default;
    li{
        margin: 5px;
        :hover{
            background: #0190D4;
            color: #fff;
        }
        &.sceneActive{
            background: #0190D4;
            color: #fff;
        }
    }
}
.hideIframe{
    display:none;
}
</style>

Ignore Space Show notes View project/hivuiLogin/index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Login</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="/${serverName}/render/assets_platform/element-ui/index.css"> <script src="/${serverName}/render/assets_platform/vue/vue.min.js"></script> <script src="/${serverName}/render/assets_platform/vuex/vuex.min.js"></script> <script src="/${serverName}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="/${serverName}/render/assets_platform/element-ui/index.js"></script> <!--发布时公共库--> <!-- <script src="/${serverName}/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="/${serverName}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="/${serverName}/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> <!-- <script src="/eaptpl/setting/desktop/appsetting/js/1.0.0/appsetting.js" type="text/javascript"></script> --> </head> <body> <div id="app"></div> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Login</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="/freemark/render/assets_platform/element-ui/index.css"> <script src="/freemark/render/assets_platform/vue/vue.min.js"></script> <script src="/freemark/render/assets_platform/vuex/vuex.min.js"></script> <script src="/freemark/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="/freemark/render/assets_platform/element-ui/index.js"></script> <!--发布时公共库--> <!-- <script src="/freemark/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="/freemark/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="/freemark/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> <!-- <script src="/eaptpl/setting/desktop/appsetting/js/1.0.0/appsetting.js" type="text/javascript"></script> --> </head> <body> <div id="app"></div> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html>

Ignore Space Show notes View

project/hivuiLogin/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>EAP5-Admin-Login</title>
  <% if(htmlWebpackPlugin.vite){%>
    
    <link rel="stylesheet" href="/assets_platform/element-ui/index.css">
    <script src="/assets_platform/vue/vue.min.js"></script>
    <script src="/assets_platform/vuex/vuex.min.js"></script>
    <script src="/assets_platform/vue-router/vue-router.min.js"></script>
    <script src="/assets_platform/element-ui/index.js"></script>
    <script src="/assets_platform/eap/eap.umd.min.js"></script>
    
    <%}%>
    <% if(!htmlWebpackPlugin.vite){%>
      <link rel="stylesheet" href="/${serverName}/render/assets_platform/element-ui/index.css">
      <script src="/${serverName}/render/assets_platform/vue/vue.min.js"></script>
      <script src="/${serverName}/render/assets_platform/vuex/vuex.min.js"></script>
      <script src="/${serverName}/render/assets_platform/vue-router/vue-router.min.js"></script>
      <script src="/${serverName}/render/assets_platform/element-ui/index.js"></script>
      
      
      <script src="/${serverName}/render/assets_platform/vendor_dll/vendor.dll.js"></script>
      <script src="/${serverName}/render/assets_platform/eap/eap.umd.min.js"></script>
      <%}%>
      
</head>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>EAP5-Admin-Login</title>
  <% if(htmlWebpackPlugin.vite){%>
    
    <link rel="stylesheet" href="/assets_platform/element-ui/index.css">
    <script src="/assets_platform/vue/vue.min.js"></script>
    <script src="/assets_platform/vuex/vuex.min.js"></script>
    <script src="/assets_platform/vue-router/vue-router.min.js"></script>
    <script src="/assets_platform/element-ui/index.js"></script>
    <script src="/assets_platform/eap/eap.umd.min.js"></script>
    
    <%}%>
    <% if(!htmlWebpackPlugin.vite){%>
      <link rel="stylesheet" href="/freemark/render/assets_platform/element-ui/index.css">
      <script src="/freemark/render/assets_platform/vue/vue.min.js"></script>
      <script src="/freemark/render/assets_platform/vuex/vuex.min.js"></script>
      <script src="/freemark/render/assets_platform/vue-router/vue-router.min.js"></script>
      <script src="/freemark/render/assets_platform/element-ui/index.js"></script>
      
      
      <script src="/freemark/render/assets_platform/vendor_dll/vendor.dll.js"></script>
      <script src="/freemark/render/assets_platform/eap/eap.umd.min.js"></script>
      <%}%>
      
</head>

</html>

Ignore Space Show notes View project/hivuiMain/index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Main</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="/${serverName}/render/assets_platform/element-ui/index.css"> <script src="/${serverName}/render/assets_platform/vue/vue.min.js"></script> <script src="/${serverName}/render/assets_platform/vuex/vuex.min.js"></script> <script src="/${serverName}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="/${serverName}/render/assets_platform/element-ui/index.js"></script> <!--发布时公共库--> <!-- <script src="/${serverName}/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="/${serverName}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="/${serverName}/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> <!-- <script src="/eaptpl/setting/desktop/appsetting/js/1.0.0/appsetting.js" type="text/javascript"></script> --> </head> <body> <div id="app"> <div style="padding:50px 0;text-align:center;"> <div> <img src="./assets/logo_max.png" /> </div> <div>系统正在预览初始化中...<a href="javascript:location.reload();">【点我刷新】</a></div> </div> </div> <script> function changeLayout(name) { window.localStorage.setItem('layout', name) window.location.reload(); } var Scp = { User: { id: "admin", name: "管理员", deptId: "", deptName: "", positionId: "GLY", postionName: "管理员", bzId: "admin_3", bzName: "管理员岗位3", bzDeptId: ".WLDJT.DGS", bzDeptName: "D公司", bzPositionId: "HQRY", bzPositionName: "后勤人员", orgId: "admin_3", defOrgId: "admin_3" } } var __guid = new Date().valueOf(); var __sysConfig = { events: { onLoad1: function () { } }, projectName: "eaptpl", sysProjectMange: { id: __guid++, name: '工程树', iconClass: 'icon-tree', uri: 'amreport/designer/tree/design.do', url: '/amrept-web/amreport/designer/tree/design.do' }, sysLoadLogo: { src: '', title: '中海创科技' }, sysLogo: { src: '', title: '中海创科技' }, //默认门户对应自定义门户功能 sysSetTabs: [ { title: '任务中心', id: __guid++, close: false, url: '#taskCenter', }, { title: '首页', id: __guid++, close: false, type: 'home', actived: true //默认选中 } // ,{ // title:'工作台', // id: __guid++, // close:false, // type:'work' // } ], //默认打开功能 sysDefTabs: [ // { // id: __guid++, // title:"设计", // url:'http://192.168.7.109:9090/#/design', // close:true, // }, // { // id: __guid++, // title:"百度功能测试", // url:'http://www.baidu.com', // close:true // }, // { // id: __guid++, // title:"bing", // url:'https://cn.bing.com/', // close:true // } ], sysList: [ ], sysFuncMenus: [ { id: __guid++, name: '系统管理', url: window.HIVUI_SETTING.sysManageUrl + "/?pn=" + window.HIVUI_SETTING.projectName, iconClass: 'icon-set-fill', target: '_blank', type: 'widthToken', }, { id: __guid++, name: '<font color=red>邮件系统</font>', url: 'http://hcmail.histron.cn:8001/webmail/index.do?osName=windows', iconClass: 'icon-mail', target: '_blank', }, { type: 'split' }, { id: __guid++, name: '布局', type: 'layout', iconClass: 'icon-user', children: [ { id: 'vertical', name: '上下布局', handler: function () { changeLayout(this.id) } }, { id: 'level', name: '左右布局', handler: function () { changeLayout(this.id) } } ] }, { type: 'split' }, { id: __guid++, name: '用户信息', type: 'userInfo', iconClass: 'icon-user', children: [ { id: __guid++, name: '部门：AF10', iconClass: 'icon-user', actived: true }, { id: __guid++, html: '<font color=red>访问下属111</font>', name: '<font color=red>访问下属</font>', iconClass: 'icon-user', children: [ { name: "张三", id: __guid++ }, { name: "李四", id: __guid++ }, ] }, { id: __guid++, name: '修改密码', iconClass: '', handler: function () { alert('访问下属'); } } ] }, { type: 'split' } ], } </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Main</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="/freemark/render/assets_platform/element-ui/index.css"> <script src="/freemark/render/assets_platform/vue/vue.min.js"></script> <script src="/freemark/render/assets_platform/vuex/vuex.min.js"></script> <script src="/freemark/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="/freemark/render/assets_platform/element-ui/index.js"></script> <!--发布时公共库--> <!-- <script src="/freemark/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="/freemark/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="/freemark/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> <!-- <script src="/eaptpl/setting/desktop/appsetting/js/1.0.0/appsetting.js" type="text/javascript"></script> --> </head> <body> <div id="app"> <div style="padding:50px 0;text-align:center;"> <div> <img src="./assets/logo_max.png" /> </div> <div>系统正在预览初始化中...<a href="javascript:location.reload();">【点我刷新】</a></div> </div> </div> <script> function changeLayout(name) { window.localStorage.setItem('layout', name) window.location.reload(); } var Scp = { User: { id: "admin", name: "管理员", deptId: "", deptName: "", positionId: "GLY", postionName: "管理员", bzId: "admin_3", bzName: "管理员岗位3", bzDeptId: ".WLDJT.DGS", bzDeptName: "D公司", bzPositionId: "HQRY", bzPositionName: "后勤人员", orgId: "admin_3", defOrgId: "admin_3" } } var __guid = new Date().valueOf(); var __sysConfig = { events: { onLoad1: function () { } }, projectName: "eaptpl", sysProjectMange: { id: __guid++, name: '工程树', iconClass: 'icon-tree', uri: 'amreport/designer/tree/design.do', url: '/amrept-web/amreport/designer/tree/design.do' }, sysLoadLogo: { src: '', title: '中海创科技' }, sysLogo: { src: '', title: '中海创科技' }, //默认门户对应自定义门户功能 sysSetTabs: [ { title: '任务中心', id: __guid++, close: false, url: '#taskCenter', }, { title: '首页', id: __guid++, close: false, type: 'home', actived: true //默认选中 } // ,{ // title:'工作台', // id: __guid++, // close:false, // type:'work' // } ], //默认打开功能 sysDefTabs: [ // { // id: __guid++, // title:"设计", // url:'http://192.168.7.109:9090/#/design', // close:true, // }, // { // id: __guid++, // title:"百度功能测试", // url:'http://www.baidu.com', // close:true // }, // { // id: __guid++, // title:"bing", // url:'https://cn.bing.com/', // close:true // } ], sysList: [ ], sysFuncMenus: [ { id: __guid++, name: '系统管理', url: window.HIVUI_SETTING.sysManageUrl + "/?pn=" + window.HIVUI_SETTING.projectName, iconClass: 'icon-set-fill', target: '_blank', type: 'widthToken', }, { id: __guid++, name: '<font color=red>邮件系统</font>', url: 'http://hcmail.histron.cn:8001/webmail/index.do?osName=windows', iconClass: 'icon-mail', target: '_blank', }, { type: 'split' }, { id: __guid++, name: '布局', type: 'layout', iconClass: 'icon-user', children: [ { id: 'vertical', name: '上下布局', handler: function () { changeLayout(this.id) } }, { id: 'level', name: '左右布局', handler: function () { changeLayout(this.id) } } ] }, { type: 'split' }, { id: __guid++, name: '用户信息', type: 'userInfo', iconClass: 'icon-user', children: [ { id: __guid++, name: '部门：AF10', iconClass: 'icon-user', actived: true }, { id: __guid++, html: '<font color=red>访问下属111</font>', name: '<font color=red>访问下属</font>', iconClass: 'icon-user', children: [ { name: "张三", id: __guid++ }, { name: "李四", id: __guid++ }, ] }, { id: __guid++, name: '修改密码', iconClass: '', handler: function () { alert('访问下属'); } } ] }, { type: 'split' } ], } </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html>

Ignore Space Show notes View

project/hivuiMain/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>EAP5-Admin-Main</title>

<% if(htmlWebpackPlugin.vite){%>
    
    <link rel="stylesheet" href="/assets_platform/element-ui/index.css">
    <script src="/assets_platform/vue/vue.min.js"></script>
    <script src="/assets_platform/vuex/vuex.min.js"></script>
    <script src="/assets_platform/vue-router/vue-router.min.js"></script>
    <script src="/assets_platform/element-ui/index.js"></script>
    <script src="/assets_platform/eap/eap.umd.min.js"></script>
    
    <%}%>
      <% if(!htmlWebpackPlugin.vite){%>
        <link rel="stylesheet" href="/${serverName}/render/assets_platform/element-ui/index.css">
        <script src="/${serverName}/render/assets_platform/vue/vue.min.js"></script>
        <script src="/${serverName}/render/assets_platform/vuex/vuex.min.js"></script>
        <script src="/${serverName}/render/assets_platform/vue-router/vue-router.min.js"></script>
        <script src="/${serverName}/render/assets_platform/element-ui/index.js"></script>
        
        
        <script src="/${serverName}/render/assets_platform/vendor_dll/vendor.dll.js"></script>
        <script src="/${serverName}/render/assets_platform/eap/eap.umd.min.js"></script>
        <%}%>
          
</head>

<body>
  <div id="app">
    <div style="padding:50px 0;text-align:center;">
      <div>
        <img src="./assets/logo_max.png" />
      </div>
      <div>系统正在预览初始化中...<a href="javascript:location.reload();">【点我刷新】</a></div>

</div>
  </div>
  <script>
    function changeLayout(name) {
      window.localStorage.setItem('layout', name)
      window.location.reload();
    }
    var Scp = {
      User: {
        id: "admin",
        name: "管理员",
        deptId: "",
        deptName: "",
        positionId: "GLY",
        postionName: "管理员",
        bzId: "admin_3",
        bzName: "管理员岗位3",
        bzDeptId: ".WLDJT.DGS",
        bzDeptName: "D公司",
        bzPositionId: "HQRY",
        bzPositionName: "后勤人员",
        orgId: "admin_3",
        defOrgId: "admin_3"
      }
    }
    var __guid = new Date().valueOf();
    var __sysConfig = {
      events: {
        onLoad1: function () {

}
      },
      projectName: "eaptpl",
      sysProjectMange: {
        id: __guid++,
        name: '工程树',
        iconClass: 'icon-tree',
        uri: 'amreport/designer/tree/design.do',
        url: '/amrept-web/amreport/designer/tree/design.do'
      },
      sysLoadLogo: {
        src: '',
        title: '中海创科技'
      },
      sysLogo: {
        src: '',
        title: '中海创科技'
      },
      //默认门户   对应自定义门户功能
      sysSetTabs: [
        {
          title: '任务中心',
          id: __guid++,
          close: false,
          url: '#taskCenter',
        },
        {
          title: '首页',
          id: __guid++,
          close: false,
          type: 'home',
          actived: true //默认选中
        }
        // ,{
        //     title:'工作台',
        //     id: __guid++,
        //     close:false,
        //     type:'work'
        // }
      ],
      //默认 打开功能
      sysDefTabs: [
        // {
        //   id: __guid++,
        //   title:"设计",
        //   url:'http://192.168.7.109:9090/#/design',
        //   close:true,
        // },
        // {
        //   id: __guid++,
        //   title:"百度功能测试",
        //   url:'http://www.baidu.com',
        //   close:true
        // },
        // {
        //   id: __guid++,
        //   title:"bing",
        //   url:'https://cn.bing.com/',
        //   close:true
        // }
      ],
      sysList: [

],
      sysFuncMenus: [
        {
          id: __guid++,
          name: '系统管理',
          url: window.HIVUI_SETTING.sysManageUrl + "/?pn=" + window.HIVUI_SETTING.projectName,
          iconClass: 'icon-set-fill',
          target: '_blank',
          type: 'widthToken',
        },
        {
          id: __guid++,
          name: '<font color=red>邮件系统</font>',
          url: 'http://hcmail.histron.cn:8001/webmail/index.do?osName=windows',
          iconClass: 'icon-mail',
          target: '_blank',
        },
        { type: 'split' },
        {
          id: __guid++,
          name: '布局',
          type: 'layout',
          iconClass: 'icon-user',
          children: [
            {
              id: 'vertical',
              name: '上下布局',
              handler: function () {
                changeLayout(this.id)
              }
            },
            {
              id: 'level',
              name: '左右布局',
              handler: function () {
                changeLayout(this.id)
              }
            }
          ]
        },
        { type: 'split' },
        {
          id: __guid++,
          name: '用户信息',
          type: 'userInfo',
          iconClass: 'icon-user',
          children: [
            {
              id: __guid++,
              name: '部门：AF10',
              iconClass: 'icon-user',
              actived: true
            },
            {
              id: __guid++,
              html: '<font color=red>访问下属111</font>',
              name: '<font color=red>访问下属</font>',
              iconClass: 'icon-user',
              children: [
                { name: "张三", id: __guid++ },
                { name: "李四", id: __guid++ },
              ]
            },
            {
              id: __guid++,
              name: '修改密码', iconClass: '',
              handler: function () {
                alert('访问下属');
              }
            }
          ]
        },
        { type: 'split' }
      ],
    }
  </script>
  <% if(htmlWebpackPlugin.vite==true){%>
    <script type="module" src="./index.js"></script>
    <%}%>
      
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>EAP5-Admin-Main</title>

<% if(htmlWebpackPlugin.vite){%>
    
    <link rel="stylesheet" href="/assets_platform/element-ui/index.css">
    <script src="/assets_platform/vue/vue.min.js"></script>
    <script src="/assets_platform/vuex/vuex.min.js"></script>
    <script src="/assets_platform/vue-router/vue-router.min.js"></script>
    <script src="/assets_platform/element-ui/index.js"></script>
    <script src="/assets_platform/eap/eap.umd.min.js"></script>
    
    <%}%>
      <% if(!htmlWebpackPlugin.vite){%>
        <link rel="stylesheet" href="/freemark/render/assets_platform/element-ui/index.css">
        <script src="/freemark/render/assets_platform/vue/vue.min.js"></script>
        <script src="/freemark/render/assets_platform/vuex/vuex.min.js"></script>
        <script src="/freemark/render/assets_platform/vue-router/vue-router.min.js"></script>
        <script src="/freemark/render/assets_platform/element-ui/index.js"></script>
        
        
        <script src="/freemark/render/assets_platform/vendor_dll/vendor.dll.js"></script>
        <script src="/freemark/render/assets_platform/eap/eap.umd.min.js"></script>
        <%}%>
          
</head>

</html>

Show line notes below