.member_banner { position: relative; background: url(../images/member/member_banner.png) no-repeat; background-size: cover; width: 100%; height: 100vh; } .member_banner .member_logo { position: absolute; top: 45px; left: 100px; display: flex; flex-direction: row; align-items: center; } .member_banner .member_logo .logo_pic { width: 57px; margin-right: 30px; } .member_banner .member_logo p { font-size: 24px; /* font-family: "Alibaba-PuHuiTi-Regular"; */ color: #FFFFFF; } .member_banner .member_login { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 514px; height: 544px; background: url(../images/member/member_login.png) no-repeat; background-size: 100% 100%; } .member_banner .member_login .login_content { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 70px 55px 30px; } .member_banner .member_login .login_content .register { position: absolute; right: 20px; top: 20px; font-size: 16px; /* font-family: "Alibaba-PuHuiTi-Bold"; */ font-weight: bold; color: #FEFEFE; line-height: 30px; } .member_banner .member_login .login_content .login_name { width: 100%; text-align: center; font-size: 30px; /* font-family: "Alibaba-PuHuiTi-Regular"; */ color: #FFFFFF; line-height: 30px; } .member_banner .member_login .login_content .ruleForm { margin-top: 40px; width: 100%; display: flex; flex-direction: column; } .member_banner .member_login .login_content .ruleForm .el-input__inner { background: rgb(0, 117, 193, 0.7); border: 1px solid #1995E5; border-radius: 5px; color: #fff; } .member_banner .member_login .login_content .ruleForm .el-input__inner::placeholder { color: #FFFFFF; font-weight: 400; } .member_banner .member_login .login_content .ruleForm .el-input__icon { color: #1995E5; } .member_banner .member_login .login_content .ruleForm .forgot_password { font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #1995E5; line-height: 1; margin-bottom: 45px; } .member_banner .member_login .login_content .ruleForm .ruleForm_row { margin-top: 60px; display: flex; flex-direction: row; width: 100%; align-items: center; justify-content: space-between; } .member_banner .member_login .login_content .ruleForm .ruleForm_row .row_register { font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #1995E5; line-height: 1; } .member_banner .member_login.forgot_password { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 514px; height: 544px; background: url(../images/member/forgot_password.png) no-repeat; background-size: 100% 100%; } .member_banner .member_login.member_register { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 995px; height: 567px; background: url(../images/member/member_register.png) no-repeat; background-size: 100% 100%; } .member_banner .member_login.member_register .login_content .ruleForm { flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .member_banner .member_login.member_register .login_content .ruleForm .el-form-item { width: 48%; } .member_banner .member_login.member_register .login_content .ruleForm .el-checkbox__inner { background-color: rgba(165, 30, 99, 0); border: 1px solid #1995E5; } .member_banner .member_login.member_register .login_content .ruleForm .el-checkbox__label, .member_banner .member_login.member_register .login_content .ruleForm .login_a { font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #1995E5; } .showc { height: 80px; } .in-header { position: relative; top: 0; } .in-header .continer1 { width: 100%; border-radius: 0; } .in-header .header_row { padding: 0 100px; } .in-header .header_row .header_logo .logo_name { margin-left: 65px; } .in-header .header_row .header_logo .logo_name h4 { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #787878; line-height: 30px; } .in-header .header_row .member_nav_row { display: flex; flex-direction: row; align-items: center; } .in-header .header_row .member_nav_row a { margin-right: 24px; padding-left: 25px; font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #787878; line-height: 1; padding-right: 24px; border-right: 1px solid #E4E4E4; transition: .5s; } .in-header .header_row .member_nav_row a:last-child { margin-right: 0; padding-right: 0; border-right: none; } .in-header .header_row .member_nav_row .nav_time { background: url(../images/member/nav_time.png) no-repeat left center; background-size: 15px 15px; } .in-header .header_row .member_nav_row .nav_index { background: url(../images/member/nav_index.png) no-repeat left center; background-size: 19px 16px; } .in-header .header_row .member_nav_row .nav_exit { background: url(../images/member/nav_exit.png) no-repeat left center; background-size: 15px 16px; } .in-header .header_row .member_nav_row .nav_index:hover, .in-header .header_row .member_nav_row .nav_exit:hover { color: #0075C2; } .member_content { display: flex; flex-direction: row; width: 100%; justify-content: space-between; position: relative; } .m_nav { width: 300px; min-height: calc(100vh - 80px); background: #0075C2; box-shadow: 0px 0px 8px 0px rgba(180, 180, 180, 0.23); display: flex; flex-direction: column; padding: 40px 30px; } .m_nav .nav_row { padding: 12px; display: flex; flex-direction: row; align-items: center; width: 100%; margin-bottom: 15px; border-radius: 5px; } .m_nav .nav_row.active { background: #8FC41E; } .m_nav .nav_row .pic { margin-right: 15px; width: 31px; height: 31px; background: #1995E5; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .m_nav .nav_row.active .pic { background: #0075C2; } .m_nav .nav_row .pic .nav1 { width: 15px; } .m_nav .nav_row .pic .nav2 { width: 19px; } .m_nav .nav_row .pic .nav3 { width: 17px; } .m_nav .nav_row .pic .nav4 { width: 19px; } .m_nav .nav_row .pic .nav5 { width: 14px; } .m_nav .nav_row p { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; } .member_content .member_right { width: calc(100% - 300px); display: flex; flex-direction: column; position: relative; min-height: calc(100vh - 80px); } .member_content .member_right .member_footer { position: absolute; bottom: 0; width: 100%; height: 80px; border-top: 1px solid #D5D5D5; padding: 0 50px; display: flex; flex-direction: row; align-items: center; } .member_content .member_right .member_footer p, .member_content .member_right .member_footer a { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #787878; line-height: 36px; margin-right: 20px; transition: .5s; } .member_content .member_right .member_footer a:hover { color: #0075C2; } .member_content .member_right .right_content { padding: 50px; display: flex; flex-direction: column; margin-bottom: 80px; width: 100%; } .member_content .member_right .right_content .right_name { font-size: 30px; font-family: Microsoft YaHei; font-weight: 400; color: #2D2D2D; line-height: 1; margin-bottom: 40px; } .b_list_return { position: absolute; top: 50px; right: 50px; margin-right: 24px; padding-left: 25px; font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #787878; line-height: 1; background: url(../images/member/nav_index.png) no-repeat left center; background-size: 19px 16px; } .member_content .member_right .right_content .information_form { width: 58%; margin: 0 auto; } .member_content .member_right .right_content .information_form .form-item-row .el-form-item__content { display: flex; flex-direction: row; justify-content: space-between; } .member_content .member_right .right_content .information_form .form-item-row .el-form-item__content::after, .member_content .member_right .right_content .information_form .form-item-row .el-form-item__content::before { display: none; } .member_content .member_right .right_content .information_form .information_submitForm { display: flex; justify-content: center; align-items: center; } .member_content .member_right .right_content .information_form .information_submitForm .el-form-item__content { margin: 0 !important; width: 15%; } .member_content .member_right .right_content .member_sample { width: 100%; position: relative; } .member_content .member_right .right_content .member_sample .my-table th { background-color: #0075C1; color: #FFFFFF; } .member_content .member_right .right_content .member_sample .margin-top-20 { margin-top: 20px; } .member_content .member_right .right_content .member_sample .my-table-row:hover>td.el-table__cell { background-color: #E6F3FB; color: #0075C2; } .member_content .member_right .right_content .member_sample .sample_dialog .el-dialog__title { font-size: 30px; font-family: Microsoft YaHei; font-weight: 400; color: #333333; } .member_content .member_right .right_content .member_sample .sample_dialog .el-dialog__headerbtn { font-size: 30px; top: 27px; } .member_content .member_right .right_content .member_sample .sample_dialog .el-dialog__header { border-bottom: 1px solid #DCDCDC; height: 83px; padding: 30px 20px 10px; } .member_sample .sample_modal { display: flex; flex-direction: column; width: 100%; padding: 10px 40px; } .member_sample .el-dialog { border-radius: 15px; } .member_sample .sample_modal .modal_name { font-size: 24px; font-family: Microsoft YaHei; font-weight: 400; color: #0075C1; } .member_sample .sample_modal .modal_table { margin: 23px 0 50px; position: relative; width: 100%; } .member_sample .sample_modal .modal_table .el-table--border { border-radius: 15px 15px 0px 0px; } .el-descriptions__header { padding-bottom: 20px; border-bottom: 2px solid #4C4C4C; } .member_sample .sample_modal .el-descriptions__title { font-size: 24px; font-family: Microsoft YaHei; font-weight: 400; color: #0075C1; } .member_sample .sample_modal .el-descriptions-item__container .el-descriptions-item__label { font-weight: bold; color: #000000; /* font-size: 16px; */ font-family: Microsoft YaHei; } .member_sample .sample_modal .el-descriptions-item__container .el-descriptions-item__content { /* font-size: 16px; */ color: #787878; font-family: Microsoft YaHei; } .member_download { display: flex; flex-direction: column; width: 100%; position: relative; height: calc(100% - 50px); } .member_download .download_wrap { display: flex; flex-wrap: wrap; width: 100%; justify-content: flex-start; margin-bottom: 60px; max-height: calc(100% - 60px); overflow-y: auto; padding-right: 10px; } .member_download .download_wrap::-webkit-scrollbar { width: 5px; border-radius: 5px; /*定义滚动条的宽度*/ } .member_download .download_wrap::-webkit-scrollbar-track { background: #f1f1f1; /*定义滚动条轨道的背景色*/ } .member_download .download_wrap::-webkit-scrollbar-thumb { background: #0075C2; border-radius: 5px; /*定义滚动条滑块的背景色*/ } .member_download .download_wrap .wrap_column { width: calc((100% - 600px) / 9); display: flex; flex-direction: column; align-items: center; margin-right: 75px; margin-bottom: 50px; } .member_download .download_wrap .wrap_column:nth-of-type(9n) { margin-right: 0; } .member_download .download_wrap .wrap_column .pic { width: 100%; margin-bottom: 5px; } .member_download .download_wrap .wrap_column p { text-align: center; font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #787878; } .member_download .el-pagination { position: absolute; bottom: 0; } .member_download .download_wrap .member_download_list { display: flex; flex-direction: row; width: 100%; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #D5D5D5; margin-bottom: 20px; } .member_download .download_wrap .member_download_list .list_left { width: 76%; font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #787878; line-height: 30px; position: relative; padding-left: 20px; background: url(../images/member/download_1.png) no-repeat left top 11px; background-size: 5px 9px; } .member_download .download_wrap .member_download_list .list_right { width: 22%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .member_download .download_wrap .member_download_list .list_right p { font-size: 16px; font-family: Arial; font-weight: 400; color: #787878; line-height: 30px; } .member_download .download_wrap .member_download_list .list_right a { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #0075C1; line-height: 30px; padding-right: 28px; background-size: 16px 16px !important; background: url(../images/member/download_2.png) no-repeat right center; } .member_download .download_wrap .member_download_list .list_right a:hover { color: #8FC41E; background: url(../images/member/download_3.png) no-repeat right center; } .member_download .download_wrap .member_video { width: calc((100% - 120px) /5); margin-right: 30px; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .member_download .download_wrap .member_video:nth-of-type(5n) { margin-right: 0; } .member_download .download_wrap .member_video .pic { width: 100%; position: relative; } .member_download .download_wrap .member_video .pic img { width: 100%; } .member_download .download_wrap .member_video .pic .pic_po { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; } .member_download .download_wrap .member_video p { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #787878; line-height: 30px; text-align: center; margin-top: 20px; } .video_dialog .el-dialog { width: 50% !important; } .video_dialog .video_content { display: flex; justify-content: center; align-items: center; width: 100%; } .video_dialog .video_content video { height: auto; width: 100%; } .member_content .member_right .el-pagination { display: flex; flex-wrap: wrap; } /* 样品申请使用说明 */ .member_sampleapplication { width: 100%; position: relative; display: flex; flex-direction: column; height: calc(100vh - 340px); overflow-y: auto; } .member_sampleapplication .sampleapplication_content { display: flex; flex-direction: column; width: 100%; margin-bottom: 20px; } .member_sampleapplication .sampleapplication_content:last-child { margin-bottom: 0; } .member_sampleapplication .sampleapplication_content h2 { font-size: 26px; color: #2D2D2D; text-align: left; margin-bottom: 20px; } .member_sampleapplication .sampleapplication_content img { width: 100%; margin-bottom: 20px; } .b_form_in1 { width: 28% } .b_form_in2 { width: 70% } @media (max-width: 1600px) { .member_download .download_wrap .wrap_column { width: calc((100% - 320px) / 9); margin-right: 40px; margin-bottom: 40px; } } @media (max-width: 1500px) { #member_login .member_banner { padding: 5%; height: 100%; min-height: 100vh; } #member_login .member_banner .member_logo { position: initial; } #member_login .member_banner .member_login.member_register { position: initial; transform: none; width: 800px; height: auto; margin: 40px auto 0; } #member_login .member_banner .member_login .login_content .register { right: 13px; top: 22px; line-height: 1; } .in-header .header_row .header_logo .logo_name h4, .in-header .header_row .member_nav_row a { font-size: 15px; } .m_nav { width: 250px; padding: 30px 20px; } .m_nav .nav_row .pic { margin-right: 10px; width: 28px; height: 28px; } .m_nav .nav_row .pic .nav1 { width: 12px; } .m_nav .nav_row .pic .nav2 { width: 16px; } .m_nav .nav_row .pic .nav3 { width: 14px; } .m_nav .nav_row .pic .nav4 { width: 16px; } .m_nav .nav_row .pic .nav5 { width: 11px; } .m_nav .nav_row p { font-size: 15px; } .member_content .member_right { width: calc(100% - 250px); } .member_content .member_right .right_content .right_name { font-size: 26px; } .member_content .member_right .member_footer { height: 65px; } .member_content .member_right .member_footer p, .member_content .member_right .member_footer a { font-size: 15px; } .member_content .member_right .right_content .member_sample .sample_dialog .el-dialog__title { font-size: 26px; } .member_content .member_right .right_content .member_sample .sample_dialog .el-dialog__header { height: 70px; padding: 24px 20px 10px; } .member_content .member_right .right_content .member_sample .sample_dialog .el-dialog__headerbtn { font-size: 26px; top: 21px; } .member_sample .sample_modal { padding: 10px 30px; } .member_sample .sample_modal .modal_name, .member_sample .sample_modal .el-descriptions__title { font-size: 22px; } .member_download .download_wrap .wrap_column p, .member_download .download_wrap .member_download_list .list_left, .member_download .download_wrap .member_download_list .list_right p, .member_download .download_wrap .member_download_list .list_right a { font-size: 15px; } .member_download .download_wrap .member_download_list { padding-bottom: 15px; margin-bottom: 15px; } .member_download .download_wrap .member_video .pic .pic_po { width: 40px; height: 40px; } .member_download .download_wrap .member_video p { font-size: 15px; margin-top: 15px; } .member_sampleapplication .sampleapplication_content h2 { font-size: 20px; margin-bottom: 15px; } } @media (max-width: 1024px) { .phone { position: relative; z-index: 999; } .m_nav { display: none; } .member_content .member_right { width: 100%; } .member_content .member_right .right_content .right_name { font-size: 22px; } .member_sample .el-dialog { width: 90% !important; } .member_download .download_wrap .wrap_column { width: calc((100% - 240px) / 7); } .member_download .download_wrap .wrap_column:nth-of-type(9n) { margin-right: 40px; } .member_download .download_wrap .wrap_column:nth-of-type(7n) { margin-right: 0; } .member_download .download_wrap .member_video { width: calc((100% - 60px) /3); } .member_download .download_wrap .member_video:nth-of-type(5n) { margin-right: 30px; } .member_download .download_wrap .member_video:nth-of-type(3n) { margin-right: 0; } .video_dialog .el-dialog { width: 80% !important; } .member_sampleapplication { height: auto; } .member_sampleapplication .sampleapplication_content h2 { font-size: 18px; } } @media (max-width: 992px) { #member_login .member_banner .member_login.member_register { width: 600px; } .member_content .member_right .right_content .information_form { width: 100%; } .member_download .download_wrap .wrap_column { width: calc((100% - 160px) / 5); } .member_download .download_wrap .wrap_column:nth-of-type(7n) { margin-right: 40px; } .member_download .download_wrap .wrap_column:nth-of-type(5n) { margin-right: 0; } .member_download .download_wrap .member_download_list .list_left, .member_download .download_wrap .member_download_list .list_right p, .member_download .download_wrap .member_download_list .list_right a { font-size: 14px; } .member_download .download_wrap .member_download_list .list_left { width: 65%; } .member_download .download_wrap .member_download_list .list_right { width: 30%; } .member_download .download_wrap .member_download_list .list_right a { padding-right: 22px; background-size: 12px 12px !important; } } @media (max-width: 600px) { /* body { height: 100vh; overflow: hidden; } */ .member_banner { padding: 5%; height: 100%; min-height: 100vh; /* overflow-y: auto; */ } .member_banner .member_logo { position: initial; } .member_banner .member_logo .logo_pic { width: 30px; margin-right: 15px; } .member_banner .member_logo p { font-size: 16px; } .member_banner .member_login, .member_banner .member_login.member_register, .member_banner .member_login.forgot_password { position: initial; transform: none; width: 90%; height: auto; margin: 80px auto 0; background: rgb(0, 117, 193, 0.5); border-radius: 12px; } .member_banner .member_login .login_content { padding: 50px 30px 30px; } .member_banner .member_login .login_content .register { right: 0; top: 0; font-size: 14px; border-radius: 0 12px; padding: 2px 15px; background: #8FC41E; } .member_banner .member_login .login_content .login_name { font-size: 23px; } .member_banner .member_login .login_content .ruleForm { margin-top: 30px; } .member_banner .member_login .login_content .ruleForm .forgot_password { margin-bottom: 35px; } .member_banner .member_login .login_content .ruleForm .ruleForm_row { margin-top: 40px; } #member_login .member_banner .member_login.member_register { width: 90%; } #member_login .member_banner .member_login .login_content .register { right: 0; top: 0; line-height: 30px; } #member_login .member_banner .member_login.member_register .login_content .ruleForm .el-form-item { width: 100%; } #member_login .member_banner .member_login.member_register .login_content .ruleForm .el-form-item:last-child, #member_login .member_banner .member_login.member_register .login_content .ruleForm .el-form-item:nth-last-child(2) { margin-bottom: 0; } .member_banner .member_login.forgot_password .el-button.is-round { padding: 12px 5px; font-size: 12px; width: 28% !important; } .member_content .member_right .right_content { padding: 40px 5%; margin-bottom: 0; } .b_list_return { top: 40px; right: 5%; font-size: 14px; } .member_content .member_right .right_content .right_name { font-size: 20px; margin-bottom: 30px; } .member_content .member_right .right_content .information_form .information_submitForm .el-form-item__content { width: 28%; } .member_content .member_right .member_footer { position: initial; height: auto; flex-wrap: wrap; padding: 15px 5%; } .member_content .member_right .member_footer p, .member_content .member_right .member_footer a { font-size: 14px; line-height: 30px; } .member_content .member_right .right_content .member_sample .sample_dialog .el-dialog__title { font-size: 20px; } .member_content .member_right .right_content .member_sample .sample_dialog .el-dialog__header { height: 55px; padding: 16px 20px 10px; } .member_content .member_right .right_content .member_sample .sample_dialog .el-dialog__headerbtn { font-size: 20px; top: 18px; } .member_content .member_right .right_content .member_sample .sample_dialog .el-dialog__body { padding: 20px 20px; } .member_sample .sample_modal { padding: 0; } .member_sample .sample_modal .modal_name, .member_sample .sample_modal .el-descriptions__title { font-size: 18px; } .member_sample .sample_modal .modal_table { margin: 15px 0 30px; } .member_sample .sample_modal .el-descriptions-row { display: flex; flex-direction: column; } .member_sample .sample_modal .el-descriptions-row .el-descriptions-item { display: flex; width: 100%; } .member_content .member_right .right_content { height: calc(100vh - 143px); } /* #member_download .member_content .member_right .right_content, #member_download_list .member_content .member_right .right_content, #member_video .member_content .member_right .right_content, #member_password .member_content .member_right .right_content { height: calc(100vh - 143px); } */ .member_download .download_wrap .wrap_column { width: calc((100% - 80px) / 3); } .member_download .download_wrap .wrap_column:nth-of-type(5n) { margin-right: 40px; } .member_download .download_wrap .wrap_column:nth-of-type(3n) { margin-right: 0; } .member_download .download_wrap .member_download_list { flex-direction: column; } .member_download .download_wrap .member_download_list .list_left { width: 100%; } .member_download .download_wrap .member_download_list .list_right { width: 100%; justify-content: flex-start; padding-left: 20px; } .member_download .download_wrap .member_download_list .list_right p { margin-right: 30px; } .member_download .download_wrap .member_video { width: calc((100% - 20px) /2); margin-right: 20px !important; margin-bottom: 20px; } .member_download .download_wrap .member_video:nth-of-type(2n) { margin-right: 0 !important; } .member_download .download_wrap .member_video p { font-size: 14px; margin-top: 10px; line-height: 26px; } .video_dialog .el-dialog { width: 95% !important; } .member_sampleapplication .sampleapplication_content h2 { font-size: 16px; } .b_form_in1 { width: 38% } .b_form_in2 { width: 60%; } }