.good-info .title{ font-size: 28rpx; color: #333; font-weight: 800px; } font-weight属性不生效

`font-weight` 属性通常用于设置文本的粗细，其值可以是数字（代表倍数）或者预定义的关键字（如 `bold` 或 `normal`）。然而，在 `.good-info .title` 的 CSS 规则中，`font-weight: 800px;` 是无效的。这是因为：

1. **数值单位错误**：对于 `font-weight`，有效的单位通常是 `bold`, `bolder`, `lighter`, 或者数值（比如 `400` 到 `900`），而不是 `px`。`px` 通常用于像素尺寸，对字体权重影响不大。

2. **简写属性问题**：CSS 中的 `font` 属性可以用来简写字体样式，但 `font-weight` 必须单独列出，因为它不能和其他属性一起简写。正确的写法应为 `font-weight: bold;` 或者直接指定数值，例如 `font-weight: 800;`。

修正后的 CSS 样式可能是这样：

.good-info .title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold; /* 或者 font-weight: 800; */
}

相关问题

uni-app写一个领券界面

好的，下面是一个简单的领券界面示例，包括优惠券列表、领取按钮和弹窗提示：

1. 在 uni-app 中创建一个页面，比如命名为 coupon.vue。

2. 在 coupon.vue 中添加以下代码：

<template>
  <view class="container">
    <view class="coupon-list">
      <view class="coupon" v-for="(coupon, index) in couponList" :key="index">
        <view class="coupon-info">
          <view class="coupon-name">{{ coupon.name }}</view>
          <view class="coupon-desc">{{ coupon.desc }}</view>
          <view class="coupon-time">{{ coupon.time }}</view>
        </view>
        <view class="coupon-receive">
          <button class="coupon-btn" @click="showPopup(index)">领取</button>
        </view>
      </view>
    </view>
    <van-popup v-model="showPopup" position="bottom">
      <view class="popup-content">
        <view class="popup-title">{{ currentCoupon.name }}</view>
        <view class="popup-desc">{{ currentCoupon.desc }}</view>
        <view class="popup-time">{{ currentCoupon.time }}</view>
        <button class="popup-btn" @click="receiveCoupon">立即领取</button>
      </view>
    </van-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      couponList: [
        {
          name: '优惠券1',
          desc: '满100减50',
          time: '有效期：2021-12-31'
        },
        {
          name: '优惠券2',
          desc: '满200减100',
          time: '有效期：2021-12-31'
        },
        {
          name: '优惠券3',
          desc: '满300减150',
          time: '有效期：2021-12-31'
        }
      ],
      showPopup: false,
      currentCoupon: {}
    }
  },
  methods: {
    showPopup(index) {
      this.currentCoupon = this.couponList[index];
      this.showPopup = true;
    },
    receiveCoupon() {
      // 领取优惠券的逻辑，可以通过接口请求实现
      this.showPopup = false;
      uni.showToast({
        title: '领取成功',
        icon: 'success'
      });
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}

.coupon-list {
  margin-top: 20rpx;
}

.coupon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 10rpx;
}

.coupon-info {
  flex: 1;
  margin-right: 20rpx;
}

.coupon-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.coupon-desc {
  color: #888;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.coupon-time {
  color: #888;
  font-size: 28rpx;
}

.coupon-receive {
  width: 200rpx;
}

.coupon-btn {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #f44;
  color: #fff;
  border-radius: 10rpx;
}

.popup-content {
  padding: 20rpx;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.popup-desc {
  color: #888;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.popup-time {
  color: #888;
  font-size: 28rpx;
}

.popup-btn {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #f44;
  color: #fff;
  border-radius: 10rpx;
}
</style>

3. 这段代码定义了一个 coupon 组件，包含一个优惠券列表和一个弹窗提示。couponList 数组存储了三个优惠券的基本信息，showPopup 变量控制弹窗的显示和隐藏，currentCoupon 变量存储当前选中的优惠券信息。

4. 优惠券列表中的每个优惠券都可以点击领取按钮，调用 showPopup 方法弹出提示框。弹出框中展示当前优惠券的详细信息，点击立即领取按钮可以执行领取优惠券的逻辑。

5. 最后，在 coupon.vue 中引入 vant-ui 库，因为示例中用到了 vant-popup 组件。可以通过以下命令安装 vant-ui：

npm install vant-weapp -S --production

6. 在 coupon.vue 中引入 vant-ui：

import { Popup } from 'vant-weapp';

export default {
  components: {
    [Popup.name]: Popup
  },
  // ...
}

7. 最后，运行 uni-app，即可看到一个简单的领券界面。

placeholder-class= "input-style"

回答: 根据你提供的引用内容，你想知道如何解决placeholder-class="input-style"的问题。根据引用\[1\]和引用\[2\]的内容，可以看出placeholder-class是用来设置placeholder文本样式的。在引用\[1\]中，使用了placeholder-class="placeholder_text"来设置placeholder文本的字体样式。而在引用\[2\]中，使用了placeholder-class="phsy"来设置placeholder文本的字体大小和颜色。所以，你可以尝试在你的代码中添加以下样式来解决问题：

.placeholder_text {
font-family: 'Source Han Sans CN';
font-weight: 350;
font-size: 24rpx;
color: #747474;
}

或者

.phsy {
font-size: 20px !important;
color: #999 !important;
}

这样，你就可以根据自己的需求设置placeholder文本的样式了。
#### 引用[.reference_title]
- *1* [【uniapp】小程序中input输入框的placeholder-class不生效以及解决办法](https://blog.csdn.net/ONLYSRY/article/details/126599202)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [uni-app input之placeholder-style、placeholder-class样式未生效](https://blog.csdn.net/qq_19249021/article/details/124023385)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]