/* c-message组件样式 */ body{ font-size: 0.14rem} .c-message { position: fixed; top: 50%; left: 50%; margin-top: -0.2rem; /* transform:translateX(-50%); */ height: 0.4rem; line-height: 0.4rem; background: #fff; color: #666; box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, .12), 0 0 0.06rem rgba(0, 0, 0, .04); z-index: 99999999; } .c-message--main { padding-left: 0.5rem; padding-right: 0.2rem; } .c-message--icon { color: #fff; width: 0.2rem; height: 0.2rem; border-radius: 0.2rem; text-align: center; position: absolute; left: 0.2rem; top: 0.1rem; text-align: center; line-height: 0.2rem;font-size: 0.2rem } .c-message--success { background: #42c09c url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9zdWNjZXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yMTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDIxMi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25fc3VjY2VzcyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzEzQ0U2NiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNy44MjU1ODE0LDE3LjE0ODQzNTcgTDE5LjAxNzQ0LDI1LjgyODEyMTMgQzE4LjkwMTE2MDksMjUuOTQyNzA4MyAxOC43NjU1MDMzLDI2IDE4LjYxMDQ2NywyNiBDMTguNDU1NDI3LDI2IDE4LjMxOTc2OTMsMjUuOTQyNzA4MyAxOC4yMDM0ODY1LDI1LjgyODEyMTMgTDE4LjAyOTA3MTYsMjUuNjU2MjUgTDEzLjE3NDQxODYsMjAuODQzNzUgQzEzLjA1ODEzOTUsMjAuNzI5MTYzIDEzLDIwLjU5NTQ4MzcgMTMsMjAuNDQyNzA0NyBDMTMsMjAuMjg5OTI5MyAxMy4wNTgxMzk1LDIwLjE1NjI1IDEzLjE3NDQxODYsMjAuMDQxNjY2NyBMMTQuMzY2Mjc3MiwxOC44NjcxODU3IEMxNC40ODI1NiwxOC43NTI2MDIzIDE0LjYxODIxNzcsMTguNjk1MzEwNyAxNC43NzMyNTc3LDE4LjY5NTMxMDcgQzE0LjkyODI5NCwxOC42OTUzMTA3IDE1LjA2Mzk1MTYsMTguNzUyNjAyMyAxNS4xODAyMzA3LDE4Ljg2NzE4NTcgTDE4LjYxMDQ2NywyMi4yNzYwMzggTDI1LjgxOTc2OTMsMTUuMTcxODcxMyBDMjUuOTM2MDQ4NCwxNS4wNTcyODggMjYuMDcxNzA2LDE1IDI2LjIyNjc0MjMsMTUgQzI2LjM4MTc4MjMsMTUgMjYuNTE3NDQsMTUuMDU3Mjg4IDI2LjYzMzcyMjgsMTUuMTcxODcxMyBMMjcuODI1NTgxNCwxNi4zNDYzNTIzIEMyNy45NDE4NjA1LDE2LjQ2MDkzNTcgMjgsMTYuNTk0NjE1IDI4LDE2Ljc0NzM5NCBDMjgsMTYuOTAwMTczIDI3Ljk0MTg2MDUsMTcuMDMzODUyMyAyNy44MjU1ODE0LDE3LjE0ODQzNTcgTDI3LjgyNTU4MTQsMTcuMTQ4NDM1NyBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 50% 50%; } .c-message--error { background: #FF4949 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9kYW5nZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iRWxlbWVudC1ndWlkZWxpbmUtdjAuMi40IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTWVzc2FnZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwLjAwMDAwMCwgLTMzMi4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IuW4puWAvuWQkV/kv6Hmga8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMzMyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl9kYW5nZXIiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiNGRjQ5NDkiIHg9IjAiIHk9IjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuODE3MjYyNywxNi4zNDUxNzk2IEMyNS45MzkwOTAyLDE2LjIyMzM0ODMgMjYsMTYuMDc2MTQxOCAyNiwxNS45MDM1NTIzIEMyNiwxNS43MzA5NjI4IDI1LjkzOTA5MDIsMTUuNTgzNzU2MyAyNS44MTcyNjI3LDE1LjQ2MTkyODkgTDI0LjUwNzYxNTcsMTQuMTgyNzQxMSBDMjQuMzg1Nzg4MiwxNC4wNjA5MTM3IDI0LjI0MzY1NzUsMTQgMjQuMDgxMjE5NiwxNCBDMjMuOTE4NzgxNywxNCAyMy43NzY2NTEsMTQuMDYwOTEzNyAyMy42NTQ4MjM1LDE0LjE4Mjc0MTEgTDIwLDE3LjgzNzU2MzUgTDE2LjMxNDcyMTYsMTQuMTgyNzQxMSBDMTYuMTkyODkwMiwxNC4wNjA5MTM3IDE2LjA1MDc1OTUsMTQgMTUuODg4MzIxNiwxNCBDMTUuNzI1ODg3NiwxNCAxNS41ODM3NTY5LDE0LjA2MDkxMzcgMTUuNDYxOTI5NCwxNC4xODI3NDExIEwxNC4xNTIyODI0LDE1LjQ2MTkyODkgQzE0LjA1MDc1ODIsMTUuNTgzNzU2MyAxNCwxNS43MzA5NjI4IDE0LDE1LjkwMzU1MjMgQzE0LDE2LjA3NjE0MTggMTQuMDUwNzU4MiwxNi4yMjMzNDgzIDE0LjE1MjI4MjQsMTYuMzQ1MTc5NiBMMTcuODM3NTYwOCwyMC4wMDAwMDE5IEwxNC4xNTIyODI0LDIzLjY1NDgyNDMgQzE0LjA1MDc1ODIsMjMuNzc2NjUxNyAxNCwyMy45MjM4NTgyIDE0LDI0LjA5NjQ0NzcgQzE0LDI0LjI2OTAzNzIgMTQuMDUwNzU4MiwyNC40MTYyNDM3IDE0LjE1MjI4MjQsMjQuNTM4MDcxMSBMMTUuNDYxOTI5NCwyNS44MTcyNTg5IEMxNS41ODM3NTY5LDI1LjkzOTA4NjMgMTUuNzI1ODg3NiwyNiAxNS44ODgzMjE2LDI2IEMxNi4wNTA3NTk1LDI2IDE2LjE5Mjg5MDIsMjUuOTM5MDg2MyAxNi4zMTQ3MjE2LDI1LjgxNzI1ODkgTDIwLDIyLjE2MjQzNjUgTDIzLjY1NDgyMzUsMjUuODE3MjU4OSBDMjMuNzc2NjUxLDI1LjkzOTA4NjMgMjMuOTE4NzgxNywyNiAyNC4wODEyMTk2LDI2IEMyNC4yNDM2NTc1LDI2IDI0LjM4NTc4ODIsMjUuOTM5MDg2MyAyNC41MDc2MTU3LDI1LjgxNzI1ODkgTDI1LjgxNzI2MjcsMjQuNTM4MDcxMSBDMjUuOTM5MDkwMiwyNC40MTYyNDM3IDI2LDI0LjI2OTAzNzIgMjYsMjQuMDk2NDQ3NyBDMjYsMjMuOTIzODU4MiAyNS45MzkwOTAyLDIzLjc3NjY1MTcgMjUuODE3MjYyNywyMy42NTQ4MjQzIEwyMi4xMzE5ODA0LDIwLjAwMDAwMTkgTDI1LjgxNzI2MjcsMTYuMzQ1MTc5NiBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 50% 50%; } .c-message--info { background: #20A0FF url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9pbmZvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0xNTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDE1Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25faW5mbyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzUwQkZGRiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMS42MTUzODQ2LDI2LjU0MzIwOTkgQzIxLjYxNTM4NDYsMjYuOTQ3ODc1MSAyMS40NTgzMzQ4LDI3LjI5MTgzNjggMjEuMTQ0MjMwOCwyNy41NzUxMDI5IEMyMC44MzAxMjY4LDI3Ljg1ODM2ODkgMjAuNDQ4NzE5NCwyOCAyMCwyOCBDMTkuNTUxMjgwNiwyOCAxOS4xNjk4NzMyLDI3Ljg1ODM2ODkgMTguODU1NzY5MiwyNy41NzUxMDI5IEMxOC41NDE2NjUyLDI3LjI5MTgzNjggMTguMzg0NjE1NCwyNi45NDc4NzUxIDE4LjM4NDYxNTQsMjYuNTQzMjA5OSBMMTguMzg0NjE1NCwxOS43NDQ4NTYgQzE4LjM4NDYxNTQsMTkuMzQwMTkwNyAxOC41NDE2NjUyLDE4Ljk5NjIyOSAxOC44NTU3NjkyLDE4LjcxMjk2MyBDMTkuMTY5ODczMiwxOC40Mjk2OTY5IDE5LjU1MTI4MDYsMTguMjg4MDY1OCAyMCwxOC4yODgwNjU4IEMyMC40NDg3MTk0LDE4LjI4ODA2NTggMjAuODMwMTI2OCwxOC40Mjk2OTY5IDIxLjE0NDIzMDgsMTguNzEyOTYzIEMyMS40NTgzMzQ4LDE4Ljk5NjIyOSAyMS42MTUzODQ2LDE5LjM0MDE5MDcgMjEuNjE1Mzg0NiwxOS43NDQ4NTYgTDIxLjYxNTM4NDYsMjYuNTQzMjA5OSBaIE0yMCwxNS44MDQyOTgxIEMxOS40NDQ0NDI3LDE1LjgwNDI5ODEgMTguOTcyMjI0LDE1LjYxOTM2ODcgMTguNTgzMzMzMywxNS4yNDk1MDQ2IEMxOC4xOTQ0NDI3LDE0Ljg3OTY0MDYgMTgsMTQuNDMwNTI1NSAxOCwxMy45MDIxNDkxIEMxOCwxMy4zNzM3NzI2IDE4LjE5NDQ0MjcsMTIuOTI0NjU3NSAxOC41ODMzMzMzLDEyLjU1NDc5MzUgQzE4Ljk3MjIyNCwxMi4xODQ5Mjk1IDE5LjQ0NDQ0MjcsMTIgMjAsMTIgQzIwLjU1NTU1NzMsMTIgMjEuMDI3Nzc2LDEyLjE4NDkyOTUgMjEuNDE2NjY2NywxMi41NTQ3OTM1IEMyMS44MDU1NTczLDEyLjkyNDY1NzUgMjIsMTMuMzczNzcyNiAyMiwxMy45MDIxNDkxIEMyMiwxNC40MzA1MjU1IDIxLjgwNTU1NzMsMTQuODc5NjQwNiAyMS40MTY2NjY3LDE1LjI0OTUwNDYgQzIxLjAyNzc3NiwxNS42MTkzNjg3IDIwLjU1NTU1NzMsMTUuODA0Mjk4MSAyMCwxNS44MDQyOTgxIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 50% 50%; } .c-message--warning { background: #F7BA2A url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl93YXJuaW5nPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yNzIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvLWNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMjcyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl93YXJuaW5nIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjRjdCQTJBIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjYxNTM4NDYsMjYuNTQzMjA5OSBDMjEuNjE1Mzg0NiwyNi45NDc4NzUxIDIxLjQ1ODMzNDgsMjcuMjkxODM2OCAyMS4xNDQyMzA4LDI3LjU3NTEwMjkgQzIwLjgzMDEyNjgsMjcuODU4MzY4OSAyMC40NDg3MTk0LDI4IDIwLDI4IEMxOS41NTEyODA2LDI4IDE5LjE2OTg3MzIsMjcuODU4MzY4OSAxOC44NTU3NjkyLDI3LjU3NTEwMjkgQzE4LjU0MTY2NTIsMjcuMjkxODM2OCAxOC4zODQ2MTU0LDI2Ljk0Nzg3NTEgMTguMzg0NjE1NCwyNi41NDMyMDk5IEwxOC4zODQ2MTU0LDE5Ljc0NDg1NiBDMTguMzg0NjE1NCwxOS4zNDAxOTA3IDE4LjU0MTY2NTIsMTguOTk2MjI5IDE4Ljg1NTc2OTIsMTguNzEyOTYzIEMxOS4xNjk4NzMyLDE4LjQyOTY5NjkgMTkuNTUxMjgwNiwxOC4yODgwNjU4IDIwLDE4LjI4ODA2NTggQzIwLjQ0ODcxOTQsMTguMjg4MDY1OCAyMC44MzAxMjY4LDE4LjQyOTY5NjkgMjEuMTQ0MjMwOCwxOC43MTI5NjMgQzIxLjQ1ODMzNDgsMTguOTk2MjI5IDIxLjYxNTM4NDYsMTkuMzQwMTkwNyAyMS42MTUzODQ2LDE5Ljc0NDg1NiBMMjEuNjE1Mzg0NiwyNi41NDMyMDk5IFogTTIwLDE1LjgwNDI5ODEgQzE5LjQ0NDQ0MjcsMTUuODA0Mjk4MSAxOC45NzIyMjQsMTUuNjE5MzY4NyAxOC41ODMzMzMzLDE1LjI0OTUwNDYgQzE4LjE5NDQ0MjcsMTQuODc5NjQwNiAxOCwxNC40MzA1MjU1IDE4LDEzLjkwMjE0OTEgQzE4LDEzLjM3Mzc3MjYgMTguMTk0NDQyNywxMi45MjQ2NTc1IDE4LjU4MzMzMzMsMTIuNTU0NzkzNSBDMTguOTcyMjI0LDEyLjE4NDkyOTUgMTkuNDQ0NDQyNywxMiAyMCwxMiBDMjAuNTU1NTU3MywxMiAyMS4wMjc3NzYsMTIuMTg0OTI5NSAyMS40MTY2NjY3LDEyLjU1NDc5MzUgQzIxLjgwNTU1NzMsMTIuOTI0NjU3NSAyMiwxMy4zNzM3NzI2IDIyLDEzLjkwMjE0OTEgQzIyLDE0LjQzMDUyNTUgMjEuODA1NTU3MywxNC44Nzk2NDA2IDIxLjQxNjY2NjcsMTUuMjQ5NTA0NiBDMjEuMDI3Nzc2LDE1LjYxOTM2ODcgMjAuNTU1NTU3MywxNS44MDQyOTgxIDIwLDE1LjgwNDI5ODEgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMC4wMDAwMDAsIDIwLjAwMDAwMCkgc2NhbGUoMSwgLTEpIHRyYW5zbGF0ZSgtMjAuMDAwMDAwLCAtMjAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat 50% 50%; } .c-message--close { position: absolute; right: 0.1rem; color: #999; text-decoration: none; cursor: pointer; font-size: 0.3rem; top: 0; line-height: 0.34rem; display: block; height: 0.4rem; } .c-message--close:hover { color: #666; } @keyframes messageFadeInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } 100% { -webkit-transform: none; transform: none } } .c-message.messageFadeInDown { -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both -webkit-animation-name: messageFadeInDown; animation-name: messageFadeInDown; } @keyframes messageFadeOutUp { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%) } } .c-message.messageFadeOutUp { -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both -webkit-animation-name: messageFadeOutUp; animation-name: messageFadeOutUp } .c-message--tip{ font-size: 0.14rem; line-height: 0.4rem; } .btn{ float:left; font-size: 0.18rem; margin:0.3rem; cursor: pointer; } /*从上到下*/ @keyframes slideFromTop { 0% { top: 0; } 100% { top: 50%; } } @-webkit-keyframes slideFromTop { 0% { top: 0; } 100% { top: 50%; } } @-moz-keyframes slideFromTop { 0% { top: 0; } 100% { top: 50%; } } @-ms-keyframes slideFromTop { 0% { top: 0; } 100% { top: 50%; } } @-o-keyframes slideFromTop { 0% { top: 0; } 100% { top: 50%; } } @keyframes hideFromTop { 0% { top: 50%; } 100% { top:0; opacity: 0; } } @-webkit-keyframes hideFromTop { 0% { top: 50%; } 100% { top:0; opacity: 0; } } @-moz-keyframes hideFromTop { 0% { top: 50%; } 100% { top:0; opacity: 0; } } @-ms-keyframes hideFromTop { 0% { top: 50%; } 100% { top:0; opacity: 0; filter:Alpha(opacity=0) } } @-o-keyframes hideFromTop { 0% { top: 50%; } 100% { top:0; opacity: 0; } } /*从下到上*/ @keyframes slideFromBottom { 0% { top: 80%; } 100% { top: 50%; } } @-webkit-keyframes slideFromBottom { 0% { top: 80%; } 100% { top: 50%; } } @-moz-keyframes slideFromBottom { 0% { top: 80%; } 100% { top: 50%; } } @-ms-keyframes slideFromBottom { 0% { top: 80%; } 100% { top: 50%; } } @-o-keyframes slideFromBottom { 0% { top: 80%; } 100% { top: 50%; } } @keyframes hideFromBottom { 0% { top: 50%; } 100% { top: 80%; opacity: 0; } } @-webkit-keyframes hideFromBottom { 0% { top: 50%; } 100% { top: 80%; opacity: 0; } } @-moz-keyframes hideFromBottom { 0% { top: 50%; } 100% { top: 80%; opacity: 0; } } @-ms-keyframes hideFromBottom { 0% { top: 50%; } 100% { top: 80%; opacity: 0; filter:Alpha(opacity=0) } } @-o-keyframes hideFromBottom { 0% { top: 50%; } 100% { top: 80%; opacity: 0; } } /*震动显示*/ @keyframes showSweetAlert { 0% { transform: scale(0.5); } 45% { transform: scale(1.05); } 80% { transform: scale(.95); } 100% { transform: scale(1); } } @-webkit-keyframes showSweetAlert { 0% { -webkit-transform: scale(0.5); } 45% { -webkit-transform: scale(1.05); } 80% { -webkit-transform: scale(.95); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes showSweetAlert { 0% { -moz-transform: scale(0.5); } 45% { -moz-transform: scale(1.05); } 80% { -moz-transform: scale(.95); } 100% { -moz-transform: scale(1); } } @-ms-keyframes showSweetAlert { 0% { -ms-transform: scale(0.5); } 33% { -ms-transform: scale(1.05); } 66% { -ms-transform: scale(.95); } 100% { -ms-transform: scale(1); } } @-o-keyframes showSweetAlert { 0% { -o-transform: scale(0.5); } 45% { -o-transform: scale(1.05); } 80% { -o-transform: scale(.95); } 100% { -o-transform: scale(1); } } @keyframes hideSweetAlert { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 80% { transform: scale(.95); } 100% { transform: scale(0); opacity: 0; } } @-webkit-keyframes hideSweetAlert { 0% { -webkit-transform: scale(1); } 45% { -webkit-transform: scale(1.05); } 80% { -webkit-transform: scale(.95); } 100% { -webkit-transform: scale(0); opacity: 0; } } @-moz-keyframes hideSweetAlert { 0% { -moz-transform: scale(1); } 45% { -moz-transform: scale(1.05); } 80% { -moz-transform: scale(.95); } 100% { -moz-transform: scale(0); opacity: 0; } } @-ms-keyframes hideSweetAlert { 0% { -ms-transform: scale(1); } 45% { -ms-transform: scale(1.05); } 80% { -ms-transform: scale(.95); } 100% { -ms-transform: scale(0); opacity: 0; filter:Alpha(opacity=0) } } @-o-keyframes hideSweetAlert { 0% { -o-transform: scale(1); } 45% { -o-transform: scale(1.05); } 80% { -o-transform: scale(.95); } 100% { -o-transform: scale(0); opacity: 0; } } /*渐入*/ @keyframes layerFadeIn{ 0% { opacity: 0; transform: scale(.5) } 100% { opacity: 1; transform: scale(1) } } @-webkit-keyframes layerFadeIn{ 0% { opacity: 0; -webkit-transform: scale(.5) } 100% { opacity: 1; -webkit-transform: scale(1) } } @-moz-keyframes layerFadeIn{ 0% { opacity: 0; -moz-transform: scale(.5) } 100% { opacity: 1; -moz-transform: scale(1) } } @-ms-keyframes layerFadeIn{ 0% { opacity: 0; -ms-transform: scale(.5); filter:Alpha(opacity=0) } 100% { opacity: 1; -ms-transform: scale(1); filter:Alpha(opacity=100) } } @-o-keyframes layerFadeIn{ 0% { opacity: 0; -o-transform: scale(.5) } 100% { opacity: 1; -o-transform: scale(1) } } @keyframes hideFadeIn{ 0% { opacity: 1; transform: scale(1) } 100% { transform: scale(.5); opacity: 0; } } @-webkit-keyframes hideFadeIn{ 0% { opacity: 1; -webkit-transform: scale(1) } 100% { -webkit-transform: scale(.5); opacity: 0; } } @-moz-keyframes hideFadeIn{ 0% { opacity: 1; -moz-transform: scale(1) } 100% { -moz-transform: scale(.5); opacity: 0; } } @-ms-keyframes hideFadeIn{ 0% { opacity: 1; -ms-transform: scale(1) } 100% { -ms-transform: scale(.5); opacity: 0; filter:Alpha(opacity=0) } } @-o-keyframes hideFadeIn{ 0% { opacity: 1; -webkit-transform: scale(1) } 100% { -webkit-transform: scale(.5); opacity: 0; } } @keyframes layer-fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px) } 100% { opacity: 1; transform: translateY(0) } } @-webkit-keyframes layer-fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @-moz-keyframes layer-fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -moz-transform: translateY(0); transform: translateY(0) } } @-ms-keyframes layer-fadeInUpBig { 0% { opacity: 0; -ms-transform: translateY(2000px); transform: translateY(2000px); filter:Alpha(opacity=0) } 100% { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); filter:Alpha(opacity=100) } } @-o-keyframes layer-fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -o-transform: translateY(0); transform: translateY(0) } } @keyframes hide-fadeInUpBig { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(2000px) } } @-webkit-keyframes hide-fadeInUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } } @-moz-keyframes hide-fadeInUpBig { 0% { opacity: 1; -moz-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(2000px); transform: translateY(2000px) } } @-ms-keyframes hide-fadeInUpBig { 0% { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); filter:Alpha(opacity=100) } 100% { opacity: 0; -ms-transform: translateY(2000px); transform: translateY(2000px); filter:Alpha(opacity=0) } } @-o-keyframes hide-fadeInUpBig { 0% { opacity: 1; -o-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -o-transform: translateY(2000px); transform: translateY(2000px) } } /*翻转*/ @-webkit-keyframes layer-rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -webkit-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } } @keyframes layer-rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; transform: translateX(0) rotate(0) } } @-moz-keyframes layer-rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -moz-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } } @-ms-keyframes layer-rollIn { 0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); filter:Alpha(opacity=0) } 100% { opacity: 1; -ms-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); filter:Alpha(opacity=100) } } @-o-keyframes layer-rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } } @-webkit-keyframes hide-rollIn { 0% { opacity: 1; -webkit-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } 100% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } } @keyframes hide-rollIn { 0% { opacity: 1; transform: translateX(0) rotate(0) } 100% { opacity: 0; transform: translateX(-100%) rotate(-120deg) } } @-moz-keyframes hide-rollIn { 0% { opacity: 1; -moz-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } 100% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } } @-ms-keyframes hide-rollIn { 0% { opacity: 1; -ms-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); filter:Alpha(opacity=100) } 100% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); filter:Alpha(opacity=0) } } @-o-keyframes hide-rollIn { 0% { opacity: 1; -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } 100% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } } /*渐入*/ @keyframes layer-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes layer-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes layer-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-o-keyframes layer-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-ms-keyframes layer-fadeIn { 0% { opacity: 0; filter:Alpha(opacity=0) } 100% { opacity: 1; filter:Alpha(opacity=100) } } @keyframes hide-fadeIn { 0% { opacity: 1 } 100% { opacity: 0 } } @-webkit-keyframes hide-fadeIn { 0% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes hide-fadeIn { 0% { opacity: 1 } 100% { opacity: 0 } } @-o-keyframes hide-fadeIn { 0% { opacity: 1 } 100% { opacity: 0 } } @-ms-keyframes hide-fadeIn { 0% { opacity: 1 } 100% { opacity: 0; filter:Alpha(opacity=0) } } /*晃动*/ @-webkit-keyframes layer-shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px) } } @keyframes layer-shake { 0%, 100% { transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px) } 20%, 40%, 60%, 80% { transform: translateX(10px) } } @-moz-keyframes layer-shake { 0%, 100% { -moz-transform: translateX(0); transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); transform: translateX(10px) } } @-ms-keyframes layer-shake { 0%, 100% { -ms-transform: translateX(0); transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -ms-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -ms-transform: translateX(10px); transform: translateX(10px) } } @-o-keyframes layer-shake { 0%, 100% { -o-transform: translateX(0); transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -o-transform: translateX(10px); transform: translateX(10px) } } @-webkit-keyframes hide-shake { 0%, 100% { -webkit-transform: translateX(10px); transform: translateX(10px) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -webkit-transform: translateX(0); transform: translateX(0) } 100%{ opacity: 0; } } @keyframes hide-shake { 0%, 100% { transform:translateX(10px) } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px) } 20%, 40%, 60%, 80% { transform: translateX(0) } 100%{ opacity: 0; } } @-moz-keyframes hide-shake { 0%, 100% { -moz-transform: translateX(10px); transform: translateX(10px) } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -moz-transform: translateX(0); transform: translateX(0) } 100%{ opacity: 0; } } @-ms-keyframes hide-shake { 0%, 100% { -ms-transform: translateX(10px); transform: translateX(10px) } 10%, 30%, 50%, 70%, 90% { -ms-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -ms-transform: translateX(0); transform: translateX(0) } 100%{ opacity: 0; filter:Alpha(opacity=0) } } @-o-keyframes hide-shake { 0%, 100% { -o-transform: translateX(10px); transform: translateX(10px) } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -o-transform: translateX(0); transform: translateX(0) } 100%{ opacity: 0; } } /*扩展放大*/ @keyframes layer-spread { 0%{ transform:scaleX(0); opacity: 0; } 100% { transform:scaleX(1); opacity: 1; } } @-webkit-keyframes layer-spread { 0%{ -webkit-transform:scaleX(0); opacity: 0; } 100% { -webkit-transform:scaleX(1); opacity: 1; } } @-moz-keyframes layer-spread { 0%{ -moz-transform:scaleX(0); opacity: 0; } 100% { -moz-transform:scaleX(1); opacity: 1; } } @-o-keyframes layer-spread { 0%{ -o-transform:scaleX(0); opacity: 0; } 100% { -o-transform:scaleX(1); opacity: 1; } } @-ms-keyframes layer-spread { 0%{ -ms-transform:scaleX(0); opacity: 0; filter:Alpha(opacity=0) } 100% { -ms-transform:scaleX(1); opacity: 1; filter:Alpha(opacity=100) } } @keyframes hide-spread { 0%{transform:scaleX(1)} 50%{transform:scaleX(.5)} 100%{transformX:scaleX(0%);opacity:0;} } @-webkit-keyframes hide-spread { 0%{-webkit-transform:scaleX(1)} 50%{-webkit-transform:scaleX(.5)} 100%{-webkit-transform:scaleX(0);opacity:0;} } @-moz-keyframes hide-spread { 0%{-moz-transform:scaleX(1)} 50%{-moz-transform:scaleX(.5)} 100%{-moz-transform:scaleX(0);opacity:0;} } @-ms-keyframes hide-spread { 0%{-ms-transform:scaleX(1)} 50%{-ms-transform:scaleX(.5)} 100%{-ms-transform:scaleX(0);opacity:0;filter:Alpha(opacity=0)} } .showAlert[data-animation=layerFadeIn] { animation: layerFadeIn .3s; -webkit-animation: layerFadeIn .3s; -moz-animation: layerFadeIn .3s; -ms-animation: layerFadeIn .3s; -o-animation: layerFadeIn .3s; } .showAlert[data-animation=showSweetAlert] { animation: showSweetAlert .3s; -webkit-animation: showSweetAlert .3s; -moz-animation: showSweetAlert .3s; -ms-animation: showSweetAlert .3s; -o-animation: showSweetAlert .3s; } .showAlert[data-animation=none] { animation: none; -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; } .showAlert[data-animation=slideFromTop] { animation: slideFromTop .3s; -webkit-animation: slideFromTop .3s; -moz-animation: slideFromTop .3s; -ms-animation: slideFromTop .3s; -o-animation: slideFromTop .3s; } .showAlert[data-animation=slideFromBottom] { animation: slideFromBottom .2s; -webkit-animation: slideFromBottom .2s; -moz-animation: slideFromBottom .2s; -ms-animation: slideFromBottom .2s; -o-animation: slideFromBottom .2s; } .showAlert[data-animation=layer-fadeInUpBig] { animation: layer-fadeInUpBig .2s; -webkit-animation: layer-fadeInUpBig .2s; -moz-animation: layer-fadeInUpBig .2s; -ms-animation: layer-fadeInUpBig .2s; -o-animation: layer-fadeInUpBig .2s; } .showAlert[data-animation=layer-rollIn] { animation: layer-rollIn .3s; -webkit-animation: layer-rollIn .3s; -moz-animation: layer-rollIn .3s; -ms-animation: layer-rollIn .3s; -o-animation: layer-rollIn .3s; } .showAlert[data-animation=layer-fadeIn] { animation: layer-fadeIn .3s; -webkit-animation: layer-fadeIn .3s; -moz-animation: layer-fadeIn .3s; -ms-animation: layer-fadeIn .3s; -o-animation: layer-fadeIn .3s; } .showAlert[data-animation=layer-shake] { animation: layer-shake .3s; -webkit-animation:layer-shake .3s; -moz-animation: layer-shake .3s; -ms-animation: layer-shake .3s; -o-animation: layer-shake .3s; } .showAlert[data-animation=layer-spread] { animation: layer-spread .2s; -webkit-animation:layer-spread .2s; -moz-animation: layer-spread .2s; -ms-animation: layer-spread .2s; -o-animation: layer-spread .2s; } .hideAlert[data-animation=layer-spread] { animation: hide-spread .5s forwards; -webkit-animation:hide-spread .5s forwards; -moz-animation: hide-spread .5s forwards; -ms-animation: hide-spread .5s forwards; -o-animation: hide-spread .5s forwards; } .hideAlert[data-animation=slideFromTop] { animation: hideFromTop .2s forwards; -webkit-animation:hideFromTop .2s forwards; -moz-animation: hideFromTop .2s forwards; -ms-animation: hideFromTop .2s forwards; -o-animation: hideFromTop .2s forwards; } .hideAlert[data-animation=slideFromBottom] { animation: hideFromBottom .2s forwards; -webkit-animation:hideFromBottom .2s forwards; -moz-animation: hideFromBottom .2s forwards; -ms-animation: hideFromBottom .2s forwards; -o-animation: hideFromBottom .2s forwards; } .hideAlert[data-animation=showSweetAlert] { animation: hideSweetAlert .2s forwards; -webkit-animation:hideSweetAlert .2s forwards; -moz-animation: hideSweetAlert .2s forwards; -ms-animation: hideSweetAlert .2s forwards; -o-animation: hideSweetAlert .2s forwards; } .hideAlert[data-animation=layerFadeIn] { animation: hideFadeIn .2s forwards; -webkit-animation:hideFadeIn .2s forwards; -moz-animation: hideFadeIn .2s forwards; -ms-animation: hideFadeIn .2s forwards; -o-animation: hideFadeIn .2s forwards; } .hideAlert[data-animation=layer-fadeIn] { animation: hide-fadeIn .2s forwards; -webkit-animation:hide-fadeIn .2s forwards; -moz-animation: hide-fadeIn .2s forwards; -ms-animation: hide-fadeIn .2s forwards; -o-animation: hide-fadeIn .2s forwards; } .hideAlert[data-animation=layer-fadeInUpBig] { animation: hide-fadeInUpBig .2s forwards; -webkit-animation:hide-fadeInUpBig .2s forwards; -moz-animation: hide-fadeInUpBig .2s forwards; -ms-animation: hide-fadeInUpBig .2s forwards; -o-animation: hide-fadeInUpBig .2s forwards; } .hideAlert[data-animation=layer-rollIn] { animation: hide-rollIn .2s forwards; -webkit-animation:hide-rollIn .2s forwards; -moz-animation: hide-rollIn .2s forwards; -ms-animation: hide-rollIn .2s forwards; -o-animation: hide-rollIn .2s forwards; } .hideAlert[data-animation=layer-shake] { animation: hide-shake .2s forwards; -webkit-animation:hide-shake .2s forwards; -moz-animation: hide-shake .2s forwards; -ms-animation: hide-shake .2s forwards; -o-animation: hide-shake .2s forwards; } .msg-layer-bg { width: 100%; z-index: 19991019; position: fixed; background: #000; opacity: 0.4; top: 0; height: 100%; filter: alpha(opacity=50); } .msg-layer{ z-index: 19991020; position: fixed; left: 50%; top: 50%; text-align:center; opacity: 1; filter: alpha(opacity=100); padding: 0 0.15rem 0.15rem; background:#fff; border-radius: 0.05rem; max-width: 8rem; min-width: 3rem; } .msg-con{ padding: 0.2rem 0.1rem; word-break: break-all; } .layer-close{ display: none; position: absolute; right: 0.1rem; top: 0; font-size: 0.2rem; color: #0068b7; height: 0.3rem; line-height: 0.3rem; cursor: pointer; } .msg-layer>h5{ font-size:0.18rem; line-height:0.3rem; border-bottom:0.01rem solid #f1f1f1; color: #0068b7;padding: 0.1rem 0 0.1rem 0; margin: 0 } .layer-btn{ padding0.16rem 0 0.1rem; text-align: center; } .layer-btn>input{ display:none; width:1rem; height:0.36rem; line-height:0.36rem; text-align: center; color:#fff; font-size: 0.14rem; border-radius: 0.05rem; cursor: pointer; border:none; outline: none; } .layer-cancel{ background:#cccccc; } .layer-commit{ background:#398fd7; margin-left: 0.1rem; } .msy-alert{ position: fixed; top: 50%; left: 50%; min-width: 2.6rem; max-width: 5rem; padding: 0.1rem; text-align: center; line-height: 0.2rem; font-size: 0.14rem; color: #9f3e42; z-index: 99999; background: #fff; border:0.01rem solid #bfbfbf; box-shadow:0 0 0.07rem0 #b5b3b3; -webkit-box-shadow:0 0 0.07rem 0 #b5b3b3; -moz-box-shadow:0 0 0.07rem 0 #b5b3b3; -ms-box-shadow:0 0 0.07rem 0 #b5b3b3; -o-box-shadow:0 0 0.07rem 0 #b5b3b3; }