| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- .container {
- background-color: #fff;
- color:#000;
- }
- .section {
- margin-bottom: 30rpx;
- background: #fff;
- border-radius: 10rpx;
- padding: 20rpx;
- width: 650rpx;
- box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
- }
- .section-title {
- font-size: 32rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 10rpx;
- }
- .section-title1 {
- font-size: 24rpx;
- font-weight: 400;
- color: #999;
- margin-bottom: 20rpx;
- }
- /* 单词列表样式 */
- .word-list {
- display: flex;
- flex-wrap: wrap;
- gap: 20rpx;
- margin-bottom: 20rpx;
- width: 650rpx;
- }
- .word-item {
- padding: 10rpx 20rpx;
- background: #f5f5f5;
- border-radius: 10rpx;
- font-size: 28rpx;
- color: #666;
- border: 2rpx solid transparent;
- transition: all 0.3s;
- }
- .word-item.selected {
- background: #e6f3ff;
- color: #0066cc;
- border-color: #0066cc;
- }
- .selected-count {
- font-size: 28rpx;
- color: #666;
- text-align: right;
- }
- /* 难度选择样式 */
- .difficulty-group {
- display: flex;
- flex-direction: column;
- width: 650rpx;
- }
- .two-column-layout {
- display: flex;
- flex-direction: column;
- width: 100%;
- }
- .style-options-container {
- display: flex;
- flex-wrap: wrap;
- width: 100%;
- gap: 10rpx;
- }
- .difficulty-item {
- display: flex;
- align-items: center;
- gap: 10rpx;
- font-size: 28rpx;
- color: #333;
- width: calc(50% - 10rpx);
- box-sizing: border-box;
- padding: 10rpx;
- }
- .style-option{
- font-size:28rpx;
- }
- .full-width {
- width: 100% !important;
- }
- /* 生成按钮样式 */
- .generate-btn {
- width: 100% !important;
- margin-top: 20rpx;
- }
- /* 文章区域样式 */
- .article-content {
- font-size: 36rpx;
- line-height: 1.6;
- margin-bottom: 40rpx;
- border-radius: 8rpx;
- width: 650rpx;
- }
- .translation-item {
- margin-bottom: 20rpx;
- padding: 10rpx 0;
- border-bottom: 1rpx solid #f0f0f0;
- width: 100%;
- }
- .article-content1 {
- margin-bottom: 8rpx;
- color: #333;
- width: 100%;
- display: block;
- }
- .article-content2 {
- color: #666;
- font-size: 28rpx;
- padding-left: 20rpx;
- border-left: 4rpx solid #1890ff;
- margin-top: 8rpx;
- width: calc(100% - 24rpx);
- display: block;
- }
- .AnswerSelected{
- background-color: #27AE60;
- color:#fff;
- }
- .Question{
- width:90%;
- margin: 30rpx 0;
- align-items: flex-start;
- }
- .Question1{
- font-size:36rpx;
- font-weight: 700;
- }
- .Options{
- font-size:32rpx;
- margin: 15rpx 0;
- }
- .Answer{
- width:650rpx;
- justify-content: flex-start;
- }
- .Answer1{
- width:80rpx;
- margin: 0 10rpx;
- }
- .highlight{
- color: #1890ff;
- font-weight: bold;
- }
- .article-canvas {
- position: fixed;
- left: -9999px;
- visibility: hidden;
- }
- /* 按钮组样式 */
- .button-group {
- display: flex;
- justify-content: space-between;
- gap: 20rpx;
- width: 100%;
- padding: 0 20rpx;
- box-sizing: border-box;
- }
- .generate-image-btn {
- flex: 1;
- margin: 30rpx 0 !important;
- background-color: #1890ff;
- color: #fff;
- font-size: 36rpx;
- padding: 0 10rpx;
- line-height: 80rpx;
- }
- /* 文章类型选择样式 */
- .style-category {
- width: 100%;
- font-size: 28rpx;
- color: #666;
- padding: 10rpx 0;
- margin-top: 20rpx;
- margin-bottom: 10rpx;
- font-weight: bold;
- border-bottom: 1rpx solid #eee;
- }
- .difficulty-group radio-group {
- display: flex;
- flex-wrap: wrap;
- width: 100%;
- }
- .difficulty-item {
- width: 50%;
- box-sizing: border-box;
- padding: 10rpx;
- }
- .difficulty-item radio {
- transform: scale(0.8);
- }
- .difficulty-item text {
- font-size: 28rpx;
- color: #333;
- }
- /* 难度选择保持单列 */
- .difficulty-select radio-group {
- flex-direction: column;
- }
- .difficulty-select .difficulty-item {
- width: 100%;
- }
|