react实现星级评分反馈效果代码

代码语言:html

所属分类:星级评分

代码描述:react实现星级评分反馈效果代码

代码标签: react 星级 评分

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body{
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        #app{
          height: 100vh;
          width:100%;
          background: powderblue;
        }
        .center{
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .star-rating-wrapper{
          background: white;
          text-align: center;
          flex-direction: column;
          box-shadow: 4px 4px 12px 0px rgba(0,0,0, 0.15);
          padding: 3rem 4rem;
          border-radius: 12px;
        }
        .star-rating-wrapper h1{
          font-size: 1.6rem;
        }
        .star-rating-wrapper p{
          color: dimgray;
        }
        .star-rating-container{
          margin: 0.4rem 0 0rem; 
          display:flex;
          flex-direction: row;
        }
        .star-rating-item{
          cursor: pointer;
          font-size: 2rem;
          color: lightgray;
          margin: 0 0.3rem;
        }
        .star-rating-item.selected{
          color: gold;
        }
    </style>




</head>

<body>
    <div id="app" class="center"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/.........完整代码请登录后点击上方下载按钮下载查看

网友评论0